/* ============================================================
   bl-deck · Rejilla de fichas que en móvil pasa a pila deslizable
   blomon-base · vanilla, sin dependencias

   Uso: clase "bl-deck" en el contenedor PADRE (el que envuelve
   las fichas). Cada ficha debe ser hijo directo de ese contenedor.
   ============================================================ */

.bl-deck{
  --bl-deck-w:min(300px,78vw);   /* ancho de la ficha en modo pila   */
  --bl-deck-gap:1.02;            /* separación entre centros, en anchos de ficha */
  --bl-deck-scale:.84;           /* escala de cada paso hacia el fondo */
  --bl-deck-trail:2;             /* fichas visibles por detrás       */
  --bl-deck-speed:820ms;
  --bl-deck-ease:cubic-bezier(.62,.02,.16,1);
  --bl-deck-dim:.13;             /* oscurecido por paso              */
  --bl-deck-ink:#1F3529;
  --bl-deck-accent:#DAA54D;
}

/* ------------------------------------------------------------
   Solo móvil. Por encima del breakpoint no se toca nada y la
   rejilla de Elementor funciona como siempre.
   ------------------------------------------------------------ */
@media (max-width:767px){

  /* paso previo: medir las fichas ya con el ancho de la pila,
     para que los titulares corten como van a cortar de verdad */
  .bl-deck-is-measuring > .e-con{
    --width:var(--bl-deck-w);
    width:var(--bl-deck-w) !important;
    height:auto !important;
  }

  /* !important porque el CSS que genera Elementor para el contenedor tiene
     la misma especificidad y puede cargarse después que este archivo */
  .bl-deck-is-on{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;   /* evita scroll horizontal por las fichas del fondo */
    gap:0 !important;
    align-items:stretch;
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
  }
  .bl-deck-is-on.bl-deck-is-dragging{cursor:grabbing}

  .bl-deck-is-on > .e-con{
    position:absolute !important;
    top:0 !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    --width:var(--bl-deck-w);
    width:var(--bl-deck-w) !important;
    margin:0 !important;
    transform:translateX(-50%);
    transform-origin:50% 50%;
    transition:transform var(--bl-deck-speed) var(--bl-deck-ease),
               opacity   var(--bl-deck-speed) var(--bl-deck-ease);
    will-change:transform,opacity;
    backface-visibility:hidden;
  }

  /* velo de profundidad: va sobre la propia ficha, no sobre el fondo */
  .bl-deck-is-on > .e-con::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:9;
    background:#171D1A;
    opacity:var(--bl-deck-veil,0);
    transition:opacity var(--bl-deck-speed) var(--bl-deck-ease);
    pointer-events:none;
  }

  .bl-deck-is-on > .e-con[data-bl-deck-state="done"]{pointer-events:none}
  .bl-deck-is-on > .e-con[data-bl-deck-state="queued"]{cursor:pointer}

  /* todas las fichas miden igual: el bloque de la imagen (2º hijo)
     absorbe la diferencia de líneas del titular */
  .bl-deck-is-on > .e-con > .e-con:nth-child(2){
    flex:1 1 auto;
    min-height:0;
  }
  .bl-deck-is-on > .e-con > .e-con:last-child{flex:0 0 auto}

  .bl-deck-is-on img{-webkit-user-drag:none;pointer-events:none}

  .bl-deck__nav{display:flex}
}

/* ------------------------------------------------------------
   Controles (los inyecta el JS justo después del contenedor)
   ------------------------------------------------------------ */
.bl-deck__nav{
  display:none;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:34px;
}
.bl-deck__btn{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--bl-deck-ink) 40%,transparent);
  border-radius:50%;
  background:transparent;
  color:var(--bl-deck-ink);
  cursor:pointer;
  transition:background-color .3s ease,border-color .3s ease,color .3s ease;
}
.bl-deck__btn svg{width:15px;height:15px}
.bl-deck__btn:hover{background:var(--bl-deck-ink);border-color:var(--bl-deck-ink);color:#F0E9DA}
.bl-deck__btn:focus-visible{outline:2px solid var(--bl-deck-accent);outline-offset:3px}
.bl-deck__count{
  margin:0;
  min-width:64px;
  text-align:center;
  font-size:13px;
  letter-spacing:.08em;
  color:color-mix(in srgb,var(--bl-deck-ink) 65%,transparent);
}
.bl-deck__count b{font-weight:500;color:var(--bl-deck-accent)}

@media (prefers-reduced-motion:reduce){
  .bl-deck{--bl-deck-speed:1ms}
}