/* Reel de tarjetas en 3D (coverflow) para las landings — lo monta js/landing-reel.js.
 *
 * El script calcula la postura de cada tarjeta (desplazamiento, profundidad, giro hacia la activa,
 * escala, desenfoque y capa) y la escribe en su style; aquí van la escena con perspectiva, el tamaño,
 * las transiciones y los controles. El acento es el de la marca: en la web pública --bv-g-047857 es el
 * rojo corporativo (js/barveo-marca.js). Cárgalo después del CSS de la página: las tarjetas conservan
 * sus estilos (fondo, borde, foto, textos) y este archivo solo les cambia la colocación.
 */

:root {
  /* El script comprueba que este CSS llegó antes de montar; si no, deja la rejilla. */
  --bl-reel-css: 1;
}

.bl-reel {
  --bl-reel-w: min(330px, 68vw);
  --bl-reel-acento: var(--bv-g-047857, #c8463d);
  --bl-reel-curva: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.bl-reel:focus-visible {
  outline: 2px solid var(--bl-reel-acento);
  outline-offset: 6px;
  border-radius: 24px;
}

/* La escena deja aire arriba y abajo para el giro y la sombra; a los lados recorta las lejanas. */
.bl-reel__escena {
  position: relative;
  height: calc(var(--bl-reel-card-h, 420px) + 56px);
  perspective: 1100px;
  overflow-x: clip;
  touch-action: pan-y;
  cursor: grab;
}

.bl-reel.is-arrastre .bl-reel__escena {
  cursor: grabbing;
}

.bl-reel .bl-reel__card {
  position: absolute;
  top: 28px;
  left: 50%;
  width: var(--bl-reel-w);
  height: var(--bl-reel-card-h, auto);
  margin: 0 0 0 calc(var(--bl-reel-w) / -2);
  box-sizing: border-box;
  backface-visibility: hidden;
  will-change: transform;
  transition:
    transform 0.7s var(--bl-reel-curva),
    filter 0.7s var(--bl-reel-curva),
    opacity 0.7s var(--bl-reel-curva),
    border-color 0.3s ease,
    box-shadow 0.4s ease;
}

.bl-reel .bl-reel__card:not(.is-activa) {
  cursor: pointer;
}

.bl-reel .bl-reel__card.is-activa {
  box-shadow: 0 26px 50px -22px rgba(15, 23, 42, 0.38);
}

/* El texto de la ventaja sale en la activa; en las vecinas queda la foto y el titular. */
.bl-reel .bl-reel__card .bl-feature__mas {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.3s ease,
    translate 0.5s var(--bl-reel-curva);
}

.bl-reel .bl-reel__card.is-activa .bl-feature__mas {
  opacity: 1;
  translate: none;
  transition-delay: 0.15s;
}

.bl-reel.is-montando .bl-reel__card,
.bl-reel.is-montando .bl-reel__card .bl-feature__mas,
.bl-reel.is-arrastre .bl-reel__card {
  transition: none;
}

.bl-reel__flecha {
  position: absolute;
  top: 50%;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: var(--bl-reel-acento);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    scale 0.2s ease;
}

.bl-reel__flecha--prev {
  left: 8px;
}

.bl-reel__flecha--next {
  right: 8px;
}

.bl-reel__flecha svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .bl-reel__flecha:hover {
    border-color: var(--bl-reel-acento);
    background: var(--bl-reel-acento);
    color: #fff;
  }
}

.bl-reel__flecha:active {
  scale: 0.94;
}

.bl-reel__flecha:focus-visible {
  outline: 2px solid var(--bl-reel-acento);
  outline-offset: 2px;
}

.bl-reel__puntos {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.bl-reel__punto {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.bl-reel__punto::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: #cbd5e1;
  transition:
    width 0.35s var(--bl-reel-curva),
    margin 0.35s var(--bl-reel-curva),
    background-color 0.3s ease;
}

.bl-reel__punto.is-activo::before {
  width: 20px;
  margin-left: -10px;
  background: var(--bl-reel-acento);
}

.bl-reel__punto:focus-visible {
  outline: 2px solid var(--bl-reel-acento);
  outline-offset: -2px;
}

/* Pase automático (data-bl-reel-auto): la raya activa es el temporizador. Empieza vacía (gris de los puntos) y el
   relleno rojo la cubre de izquierda a derecha en --bl-reel-auto; al acabar, landing-reel.js pasa a la siguiente.
   is-detenido la congela donde esté (ratón encima, arrastre, teclado, pausa, fuera de pantalla). */
.bl-reel__carga {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 7px;
  margin: -3.5px 0 0 -10px;
  border-radius: 999px;
  background: var(--bl-reel-acento);
  clip-path: inset(0 100% 0 0 round 999px);
  opacity: 0;
  pointer-events: none;
}

.bl-reel.is-auto .bl-reel__punto.is-activo::before {
  background: #cbd5e1;
}

.bl-reel.is-auto .bl-reel__punto.is-activo .bl-reel__carga {
  opacity: 1;
  animation: bl-reel-carga var(--bl-reel-auto, 5000ms) linear forwards;
  /* Negativo cuando la rueda ya había llenado parte de la raya (landing-reel.js, retomarAuto). */
  animation-delay: var(--bl-reel-desfase, 0ms);
}

.bl-reel.is-auto.is-detenido .bl-reel__punto.is-activo .bl-reel__carga {
  animation-play-state: paused;
}

/* Rueda del ratón (data-bl-reel-rueda): mientras la rueda recorre el reel (is-rueda), la raya no corre sola; la llena
   la rueda según --bl-reel-llenado (de 0 a 1), que pone landing-reel.js. */
.bl-reel.is-rueda .bl-reel__punto.is-activo::before {
  background: #cbd5e1;
}

.bl-reel.is-rueda .bl-reel__punto.is-activo .bl-reel__carga {
  opacity: 1;
  animation: none;
  clip-path: inset(0 calc(100% - var(--bl-reel-llenado, 0) * 100%) 0 0 round 999px);
  transition: clip-path 0.12s linear;
}

@keyframes bl-reel-carga {
  from {
    clip-path: inset(0 100% 0 0 round 999px);
  }
  to {
    clip-path: inset(0 0 0 0 round 999px);
  }
}

/* Pausa / reanudar del pase automático (data-bl-reel-auto), al final de la fila de puntos. */
.bl-reel__pausa {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s ease;
}

.bl-reel__pausa[hidden] {
  display: none;
}

.bl-reel__pausa svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bl-reel__pausa.is-pausado svg {
  fill: currentColor;
  stroke-width: 1.6;
}

@media (hover: hover) {
  .bl-reel__pausa:hover {
    color: var(--bl-reel-acento);
  }
}

.bl-reel__pausa:focus-visible {
  outline: 2px solid var(--bl-reel-acento);
  outline-offset: -2px;
}

.bl-reel__vivo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Móvil: el reel va de borde a borde (las vecinas asoman por los lados de la pantalla) y sin
   flechas, que tapaban la tarjeta activa; se pasa deslizando o con los puntos. */
@media (max-width: 640px) {
  .bl-reel {
    margin-inline: calc(50% - 50vw);
  }

  .bl-reel__flecha {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-reel .bl-reel__card,
  .bl-reel .bl-reel__card .bl-feature__mas,
  .bl-reel__punto::before {
    transition: none;
  }
}