/******* Do not edit this file *******
Code Snippets Manager
Saved: Feb 12 2026 | 18:24:30 */
@charset "UTF-8";
/* 1. CONTENEDORES PRINCIPALES */
.slider-phone, .slider-phone-reverse {
  width: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  white-space: nowrap;
}
/* 2. PISTAS DE ANIMACIÓN: SEGREGACIÓN POR DIRECCIÓN */
.slider-phone-track, .slider-phone-reverse-track {
  display: flex !important;
  gap: 25px;
  width: max-content !important;
  /* Reserva de 30px para la proyección de sombra inferior */
  padding: 0 20px 30px 20px;
}
.slider-phone-track {
  animation: scroll 25s linear infinite;
}
.slider-phone-reverse-track {
  animation: scroll 25s linear infinite reverse;
}
/* 3. ELEMENTO SLIDE: GEOMETRÍA OPTIMIZADA PC */
.slide-phone {
  flex: 0 0 auto;
  width: 9vw;
  min-width: 145px;
  /* Altura reducida en PC: De 9/21 a 9/18 */
  aspect-ratio: 0.5;
  height: auto !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #fff;
  border: 1px solid #c1c1c1;
  /* Sombra proyectada inferior-derecha (Fuerte Densidad) */
  box-shadow: inset 0 0 0 8px #000, 12px 12px 15px -5px rgba(0, 0, 0, 0.5), 5px 5px 8px -3px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
/* Hardware lateral: Botones ajustados al nuevo alto de PC */
.slide-phone::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 70px;
  /* Posición recalculada para el ratio 9/18 */
  width: 2px;
  height: 35px;
  background: #666;
  box-shadow: 0 45px 0 #666;
  border-radius: 2px 0 0 2px;
}
/* 4. SEPARACIÓN NETA DE 6PX (ESCRITORIO) */
.slider-phone + .slider-phone, .slider-phone + .slider-phone-reverse, .slider-phone-reverse + .slider-phone, .slider-phone-reverse + .slider-phone-reverse {
  margin-top: -24px !important;
}
/* 5. RESPONSIVE: AJUSTE PARA MÓVIL */
@media screen and (max-width: 768px) {
  /* Gap de 6px en móvil: 25px padding - 19px margen = 6px */
  .slide-phone {
    width: 35vw;
    min-width: 130px;
    /* Ratio estándar 9/16 para máxima estabilidad en móvil */
    aspect-ratio: 0.5625;
    box-shadow: inset 0 0 0 6px #000, 8px 8px 12px -4px rgba(0, 0, 0, 0.55);
  }
  .slide-phone::after {
    top: 60px;
    /* Botones más altos para el ratio móvil */
  }
  .slider-phone-track, .slider-phone-reverse-track {
    padding-bottom: 25px;
  }
  .slider-phone + .slider-phone, .slider-phone + .slider-phone-reverse {
    margin-top: -19px !important;
  }
}
/* 6. ANIMACIÓN GLOBAL */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}