/* === Imaginaria · Carruseles unificados (Proyectos, Red, Blog) === */
:root{
  --rail-gap:16px;
  --rail-card-min:240px;
  --rail-card-max:320px;
  --rail-bar-h:8px;
}

/* Contenedor de cada rail (envoltorio de seguridad para flechas) */
.rail-wrap{ position:relative; overflow:visible; }

/* Scrollers de los tres casos */
.app-rail,
.hbo-carousel .wp-block-post-template{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--rail-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;               /* Firefox: oculta nativa */
}
.app-rail::-webkit-scrollbar,
.hbo-carousel .wp-block-post-template::-webkit-scrollbar{
  height:0 !important; width:0 !important; background:transparent !important;
}

/* Ítems dentro del rail (no se estiran, ancho razonable, snap) */
.app-rail > *,
.hbo-carousel .wp-block-post-template > *{
  flex:0 0 clamp(var(--rail-card-min), 80vw, var(--rail-card-max));
  min-width:0;
  scroll-snap-align:start;
}

/* Cards: estructura estable (no “bailan”) */
.app-rail .card,
.hbo-carousel .wp-block-post-template > *{
  display:flex;
  flex-direction:column;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--stroke, #e5e7eb);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  overflow:hidden;
}

/* Imágenes: rellenan 16:9 sin dejar “barra negra” debajo */
.app-rail .card img,
.hbo-carousel .wp-block-post-template img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* Cuerpo de la card */
.app-rail .card .card-body{ padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.app-rail .card .card-title{ margin:0; font-size:18px; }
.app-rail .card .card-meta{ font-size:13px; opacity:.75; }

/* ===== UI de navegación (barra + flechas) ===== */
.hbo-rail{
  margin-top:8px;
  height:var(--rail-bar-h);
  width:100%;
  background:rgba(0,0,0,.08);
  border-radius:999px;
  position:relative;
  overflow:hidden;
  display:none;                       /* se muestra solo con overflow */
}
.hbo-rail-thumb{
  position:absolute; left:0; top:0; bottom:0;
  width:80px;
  background:var(--accent,#8B1111);
  border-radius:999px;
}

/* Flechas universales (PC) */
.hbo-carousel, .rail-wrap{ position:relative; }
.hbo-nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  width:36px; height:36px;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.25);
  z-index:6; user-select:none;
}
.hbo-nav:hover{ background:rgba(0,0,0,.65); }
.hbo-nav--prev{ left:6px; }
.hbo-nav--next{ right:6px; }
@media (pointer:coarse){ .hbo-nav{ display:none !important; } }

/* Modo oscuro: tarjetas y barra se adaptan sin romper marca */
@media (prefers-color-scheme:dark){
  .app-rail .card,
  .hbo-carousel .wp-block-post-template > *{
    background:#121316; border-color:#23262b; color:#e9eaec;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .hbo-rail{ background:#30343a; }
}