/* ==========================================================================
   CUSTOM PHONE SLIDER  ·  bricks-child
   Marco de celular fijo + capturas rotando dentro de la pantalla.

   Scoping: los valores por defecto viven en la clase .brxe-custom-phone-slider.
   Bricks escribe los controles de estilo en #brxe-{id} (mas especifico) y el
   render() de PHP inyecta la geometria inline en el _root, asi que ambos
   pisan estos defaults sin necesidad de !important.
   ========================================================================== */

.brxe-custom-phone-slider {
  /* -- Geometria: la pisa el inline style de render() ---------------------- */
  --cps-frame-w: 400;
  --cps-frame-h: 788;
  --cps-screen-left: 9.75%;
  --cps-screen-top: 12.3096%;
  --cps-screen-width: 81.75%;
  --cps-screen-height: 73.9848%;

  /* -- Look: lo pisan los controles de estilo de Bricks -------------------- */
  --cps-max-width: 400px;
  --cps-transition-duration: 600ms;
  --cps-transition-easing: cubic-bezier(.4, 0, .2, 1);
  --cps-shift-distance: 4%;
  --cps-app-fit: cover;
  --cps-app-position: center center;
  --cps-screen-bg: #0b0b0f;

  --cps-dot-size: 9px;
  --cps-dot-gap: 10px;
  --cps-dot-color: #d3d7e0;
  --cps-dot-color-hover: #a9b0c0;
  --cps-dot-color-active: #4f46e5;
  --cps-dot-active-scale: 1.25;
  --cps-dots-margin-top: 28px;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--cps-max-width);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   CAJA DEL MARCO
   aspect-ratio hace todo el trabajo responsive: no hay un solo px fijo
   adentro, asi que el hueco de pantalla se mantiene exacto en cualquier ancho.
   -------------------------------------------------------------------------- */
.brxe-custom-phone-slider .cps-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cps-frame-w) / var(--cps-frame-h);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   >>> BLOQUE DE RECORTE  <<<
   --------------------------------------------------------------------------
   El marco tiene canal alfa, asi que el metodo es: capturas ABAJO, marco
   ARRIBA, y el hueco transparente del PNG/WebP deja ver las capturas.

   El overflow:hidden NO es redundante: la transicion desplaza la imagen
   entrante en horizontal, y sin el clip esa imagen se asomaria por las zonas
   transparentes de AFUERA del celular (las esquinas redondeadas del cuerpo).

   El posicionamiento es 100% porcentual respecto de .cps-stage, por eso el
   recorte no se corre al reescalar. Los cuatro valores salen de los controles
   del panel (grupo "Screen") porque dependen del marco que se suba.
   ========================================================================== */
.brxe-custom-phone-slider .cps-screen {
  position: absolute;
  left:   var(--cps-screen-left);
  top:    var(--cps-screen-top);
  width:  var(--cps-screen-width);
  height: var(--cps-screen-height);
  overflow: hidden;                /* <- el recorte */
  background: var(--cps-screen-bg);  /* solo se ve con --cps-app-fit: contain */
  /* NO poner box-shadow/outline/border aca para "tapar" un posible hairline:
     el anillo de 1px por fuera del hueco no es bisel opaco, es el antialiasing
     del borde del marco y esta mayormente transparente (en mobile-slider.webp
     la columna de al lado del hueco tiene alpha 43 de 255). Cualquier color
     pintado ahi se ve a traves y queda como un borde negro alrededor de la
     captura. Tampoco hace falta: la img del marco es width/height 100% del
     stage y este div se posiciona en % del mismo stage, asi que el hueco y el
     recorte escalan desde la misma caja fraccionaria y no se pueden separar. */
  z-index: 1;
}
/* ======================= FIN BLOQUE DE RECORTE ========================== */

/* --------------------------------------------------------------------------
   LAS CAPTURAS (apiladas, fade cruzado)
   -------------------------------------------------------------------------- */
.brxe-custom-phone-slider .cps-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;                 /* neutraliza reglas globales de img */
  object-fit: var(--cps-app-fit);
  object-position: var(--cps-app-position);
  display: block;
  opacity: 0;
  /* --cps-sx es -1 / 0 / 1: lo setea el JS para dar direccion al fade */
  transform: translateX(calc(var(--cps-sx, 0) * var(--cps-shift-distance)));
  transition:
    opacity   var(--cps-transition-duration) var(--cps-transition-easing),
    transform var(--cps-transition-duration) var(--cps-transition-easing);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;            /* el swipe lo escucha el stage, no la img */
}

.brxe-custom-phone-slider .cps-shot.is-active {
  opacity: 1;
  z-index: 2;
}

/* Sin JS (o antes de que corra): que al menos se vea la primera captura */
.brxe-custom-phone-slider .cps-shot:first-child {
  opacity: 1;
}
.brxe-custom-phone-slider.cps-ready .cps-shot:first-child:not(.is-active) {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   EL MARCO, POR ENCIMA
   -------------------------------------------------------------------------- */
.brxe-custom-phone-slider .cps-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  z-index: 3;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* --------------------------------------------------------------------------
   DOTS
   -------------------------------------------------------------------------- */
.brxe-custom-phone-slider .cps-dots {
  display: flex;
  justify-content: center;
  gap: var(--cps-dot-gap);
  margin-top: var(--cps-dots-margin-top);
}

.brxe-custom-phone-slider .cps-dots:empty {
  display: none;
}

.brxe-custom-phone-slider .cps-dot {
  width: var(--cps-dot-size);
  height: var(--cps-dot-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cps-dot-color);
  cursor: pointer;
  appearance: none;
  transition: background-color 250ms ease, transform 250ms ease;
  -webkit-tap-highlight-color: transparent;
}

.brxe-custom-phone-slider .cps-dot:hover {
  background: var(--cps-dot-color-hover);
}

.brxe-custom-phone-slider .cps-dot[aria-current="true"] {
  background: var(--cps-dot-color-active);
  transform: scale(var(--cps-dot-active-scale));
}

.brxe-custom-phone-slider .cps-dot:focus-visible {
  outline: 2px solid var(--cps-dot-color-active);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .brxe-custom-phone-slider {
    --cps-transition-duration: 1ms;
    --cps-shift-distance: 0%;
  }
}