/**
 * @file
 * Header Slider — carousel horizontal de cards.
 *
 * Desktop (≥ 768px): 3 cards visibles (hero 38% + 2 secundarias 24% c/u)
 *   + peek de la card anterior asomando por la izquierda (~6% visible)
 *   + flechas prev/next abajo a la derecha. Las cards animan por left/width.
 *   El rail vertical de iconos fue retirado en esta versión para dar más
 *   espacio al carousel y al peek.
 *
 * Mobile (< 768px): flechas ocultas. Las cards en scroll-snap horizontal
 *   nativo (gesto táctil), una y media visible a la vez. El rail se
 *   transforma en DOTS minimalistas (pill style, activa rosa "alargada").
 *
 * Variables CSS:
 *   --rk-brand / --rk-accent — del BrandResolver (host actual).
 *   --c1 / --c2 — gradiente por card (configurable por el editor).
 *   --bg — URL de la imagen de fondo de la card (opcional).
 *   --hs-top-clear — respiro arriba para no chocar con navbars fixed-top.
 */

/* ---- Scope --------------------------------------------------------- */
.hs {
  --rk-brand: #e6196b;
  --rk-accent: #ffd84d;
  /* Top clearance: respira el navbar fixed-top de webscasinos (~70px alto).
     Lo dejamos como variable para que otros proyectos del ecosistema con
     navbar más alta/baja puedan overridearlo sin tocar el resto del padding:
       .hs { --hs-top-clear: 100px; }   // navbar más grande
       .hs { --hs-top-clear: 22px; }    // sin navbar fija
     Los otros 3 lados quedan fijos a 22px (laterales + bottom). */
  --hs-top-clear: 80px;

  position: relative;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 22px;
  font-family: inherit;
  color: #14101a;
  box-sizing: border-box;
}
.hs *, .hs *::before, .hs *::after { box-sizing: border-box; }

/* ============================================================
   DESKTOP (≥ 768 px)
   ============================================================ */
@media (min-width: 768px) {

  .hs {
    display: grid;
    /* Sin rail en desktop — el espacio que ocupaba se aprovecha para
       mostrar un peek de la card anterior (ver POS.offL en el JS).
       Más cinético / "carousel-feeling" que el rail rígido. */
    grid-template-columns: 1fr;
    grid-template-areas:
      "carousel"
      "arrows";
    row-gap: 12px;
  }

  /* Rail desactivado en desktop. El elemento sigue en el DOM por
     consistencia con mobile (donde se muestra como dots) y para que
     la lógica del JS (setRailActive, click delegation) siga sin
     condicionales. Solo lo ocultamos visualmente aquí. */
  .hs__rail { display: none; }

  /* ---- Carousel -------------------------------------------------- */
  .hs__carousel {
    grid-area: carousel;
    position: relative;
    height: 320px;
    /* overflow:hidden recorta offR a la derecha y limita el peek de offL
       al borde izquierdo del carousel (solo asoma la franja 0%-6% del
       ancho del carousel, sugiriendo "hay más cards a la izquierda"). */
    overflow: hidden;
    border-radius: 22px;
  }

  .hs__card {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(20,16,26,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff !important;
    text-decoration: none !important;
    isolation: isolate;
    transition: left 0.5s cubic-bezier(.2,.8,.2,1),
                width 0.5s cubic-bezier(.2,.8,.2,1),
                opacity 0.35s ease;
    will-change: left, width;
    cursor: pointer;
  }
  .hs__card.is-no-transition { transition: none !important; }
  .hs__card:hover { color: #fff !important; text-decoration: none !important; }
  /* Belt-and-suspenders: las cards "is-hidden" (offL/offR) no aceptan
     clicks aunque el overflow:hidden ya las recorta. */
  .hs__card.is-hidden { pointer-events: none; }

  /* Background image (z-0). */
  .hs__card-bg {
    position: absolute; inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  /* Brand tint (z-1) — gradiente por card. */
  .hs__card-tint {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  /* Si hay imagen, bajamos opacidad del tint para que la imagen respire. */
  .hs__card[style*="--bg"] .hs__card-tint { opacity: 0.55; }

  /* Shade inferior para legibilidad del título (z-2). */
  .hs__card-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 2;
  }

  /* Contenido (z-3). */
  .hs__card-eyebrow,
  .hs__card-deco,
  .hs__card-bottom {
    position: absolute;
    z-index: 3;
  }

  .hs__card-eyebrow {
    top: 16px; left: 16px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.92);
    color: var(--c2);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .hs__card-deco {
    right: -8px; bottom: -8px;
    width: 130px; height: 130px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: width 0.45s cubic-bezier(.2,.8,.2,1),
                height 0.45s cubic-bezier(.2,.8,.2,1);
  }
  .hs__card-deco i { font-size: 52px; color: #fff; line-height: 1; }

  .hs__card.is-sm .hs__card-deco { width: 96px; height: 96px; }
  .hs__card.is-sm .hs__card-deco i { font-size: 40px; }

  /* Logo overlay: cuando la card tiene logo_url, el deco-icon FA se
     oculta y aparece el logo centrado y en blanco (filter CSS).
     Inspirado en .bono-card__overlay-logo de custom.css. */
  .hs__card.has-logo .hs__card-deco { display: none; }
  .hs__card-logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    width: 60%;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hs__card-logo img {
    width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
  }
  .hs__card.is-sm .hs__card-logo {
    width: 70%;
    max-width: 130px;
  }
  .hs__card.is-sm .hs__card-logo img { max-height: 50px; }

  .hs__card-bottom {
    bottom: 18px; left: 18px; right: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
  }

  /* h3 con !important para neutralizar estilos agresivos del theme. */
  .hs__card-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    font-size: 26px !important;
    max-width: 60%;
    transition: font-size 0.45s ease, max-width 0.45s ease;
  }
  .hs__card.is-sm .hs__card-title {
    font-size: 18px !important;
    max-width: 70%;
  }
  /* Neutralizar pseudos del theme (subrayados, líneas…). */
  .hs__card-title::before,
  .hs__card-title::after { content: none !important; display: none !important; }

  .hs__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--c2);
    font-size: 13px;
    font-weight: 800;
    width: fit-content;
    pointer-events: auto;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  .hs__card-cta i { font-size: 10px; }
  .hs__card:hover .hs__card-cta {
    transform: translateY(-1px);
    background: var(--rk-brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(230,25,107,0.30);
  }
  .hs__card.is-sm .hs__card-cta-label { display: none; }
  .hs__card.is-sm .hs__card-cta { padding: 8px 10px; }

  /* ---- Flechas prev / next --------------------------------------- */
  .hs__arrows {
    grid-area: arrows;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-right: 4px;
  }
  .hs__arrow {
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 1px solid #ebe6ee;
    background: #fff;
    color: #14101a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .hs__arrow i { font-size: 14px; line-height: 1; }
  .hs__arrow:hover {
    background: var(--rk-brand);
    color: #fff;
    border-color: var(--rk-brand);
  }

}  /* fin desktop */


/* ============================================================
   MOBILE (< 768 px) — scroll horizontal nativo
   ============================================================ */
@media (max-width: 767.98px) {

  /* En webscasinos el navbar mobile (hamburguesa + logo) mide ~70px y es
     fixed-top, así que necesitamos al menos esa altura de respiro. 80px
     deja un pequeño gap visual entre el navbar y la primera card. Si lo
     necesitas más/menos en tu proyecto, overridea con
     `.hs { --hs-top-clear: Npx; }` desde un media query a nivel de site. */
  .hs { --hs-top-clear: 80px; }

  /* Sin display:flex en .hs — el orden HTML (carousel primero, rail
     después en el twig) ya pone el rail debajo del carousel. Eso
     evita que las cards cambien de tamaño por sizing de flex. */
  .hs__arrows { display: none; }

  /* Rail mobile transformado en DOTS (pattern Instagram/banner).
     Los mismos .hs__rail-btn que en desktop son iconos clickables, aquí
     son puntitos minimalistas. El icono FA dentro se oculta. El active
     se "alarga" (pill) en vez de cambiar tamaño bruscamente, para dar
     señal clara sin meter ruido visual.
     El JS no se entera: sigue tratándolos como rail buttons normales. */
  .hs__rail {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    align-items: center;
    padding: 10px 8px 2px;
    background: transparent;
    border: none;
  }
  .hs__rail-btn {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: rgba(20, 16, 26, 0.20);
    color: transparent;
    padding: 0;
    display: block;
    transition: background 0.2s ease, width 0.25s ease, transform 0.2s;
    /* override del background con --c1 que hereda de desktop — en mobile
       los dots no llevan color por card, todos grises e iguales. */
    background-image: none;
  }
  /* Ocultamos los iconos FA dentro del botón (los dots no llevan icono). */
  .hs__rail-btn i { display: none; }
  .hs__rail-btn:hover { background: rgba(20, 16, 26, 0.35); }
  .hs__rail-btn.is-active {
    background: var(--rk-brand);
    width: 22px;
  }

  .hs__carousel {
    position: relative;
    height: auto;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 18px;
    margin: 0 -14px;
    scrollbar-width: none;
  }
  .hs__carousel::-webkit-scrollbar { display: none; }

  .hs__card {
    position: relative;
    flex: 0 0 82vw;
    max-width: 320px;
    /* 180px: compacta, deja más oferta above-the-fold sin sacrificar
       legibilidad. Empíricamente el sweet-spot en afiliados mobile. */
    height: 180px;
    scroll-snap-align: start;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(20,16,26,0.16);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff !important;
    text-decoration: none !important;
    isolation: isolate;
    cursor: pointer;
  }

  .hs__card-bg {
    position: absolute; inset: 0;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .hs__card-tint {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
    z-index: 1;
  }
  .hs__card[style*="--bg"] .hs__card-tint { opacity: 0.55; }
  .hs__card-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
  }

  .hs__card-eyebrow,
  .hs__card-deco,
  .hs__card-bottom {
    position: absolute;
    z-index: 3;
  }

  .hs__card-eyebrow {
    top: 10px; left: 10px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.92);
    color: var(--c2);
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  .hs__card-deco {
    right: -4px; bottom: -4px;
    width: 70px; height: 70px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
  }
  .hs__card-deco i { font-size: 28px; color: #fff; line-height: 1; }

  /* Logo overlay en mobile — re-escalado para card de 180px de alto. */
  .hs__card.has-logo .hs__card-deco { display: none; }
  .hs__card-logo {
    position: absolute;
    top: 36%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    width: 55%;
    max-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hs__card-logo img {
    width: 100%;
    max-height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.92;
  }

  .hs__card-bottom {
    bottom: 10px; left: 12px; right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hs__card-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    font-size: 16px !important;
    max-width: 70%;
  }
  .hs__card-title::before,
  .hs__card-title::after { content: none !important; display: none !important; }

  .hs__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff;
    color: var(--c2);
    font-size: 11px;
    font-weight: 800;
    width: fit-content;
  }
  .hs__card-cta i { font-size: 8px; }

}  /* fin mobile */