/* Frontend CSS – Rayo Slider
 * Desarrollador: RayoCreativo (RayoCreativo.com)
 */

/* Contenedor general */
.rayo-slider-wrap{ width:100%; }
.rayo-slider{ 
    position:relative; 
    overflow:hidden; 
    width:100%;
    /* Altura inicial basada en aspect-ratio 1920x500 (desktop) */
    aspect-ratio: 1920 / 500;
    min-height: 200px; /* Fallback para navegadores antiguos */
    background-color: #f5f5f5; /* Fondo gris mientras carga */
}

/* Track: debe tener dimensiones explícitas desde el inicio para prevenir CLS */
.rayo-track{ 
    display:flex; 
    transition:transform .45s ease; 
    width: 100%;
    height: 100%;
    /* Asegurar que el track ocupe el espacio completo desde el inicio */
    position: relative;
    /* Mantener el espacio reservado incluso cuando está oculto */
    min-height: 100%;
}

/* Track: oculto hasta que JS inicialice, pero mantiene el espacio reservado */
.rayo-slider:not(.is-ready) .rayo-track {
    opacity: 0;
    visibility: hidden;
    /* Mantener display:flex para que el espacio se reserve correctamente */
    /* El espacio ya está reservado por el aspect-ratio del contenedor padre */
}

.rayo-slider.is-ready .rayo-track {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}
.rayo-slide{ 
    flex:0 0 100%; 
    width: 100%;
    height: 100%;
    position: relative;
}
.rayo-slide img{ 
    width:100%; 
    height:100%; 
    display:block; 
    object-fit:cover;
    /* Prevenir CLS: las imágenes ahora tienen atributos width/height en el HTML */
    /* El aspect-ratio del contenedor padre ya reserva el espacio */
}

/* Flechas: visibles pero deshabilitadas hasta que esté listo */
.rayo-slider:not(.is-ready) .rayo-nav {
    opacity: 0;
    pointer-events: none;
    z-index: 1; /* Asegurar que estén en su lugar */
}

.rayo-slider.is-ready .rayo-nav {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* Dots: ocultos hasta que esté listo */
.rayo-slider:not(.is-ready) .rayo-dots {
    opacity: 0;
    pointer-events: none;
}

.rayo-slider.is-ready .rayo-dots {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* Flechas (círculo blanco) */
.rayo-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:#fff; border:none; box-shadow:0 2px 8px rgba(0,0,0,.15);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:18px; line-height:1;
}
.rayo-prev{ left:12px; }
.rayo-next{ right:12px; }
.rayo-nav:focus{ outline:2px solid #111; outline-offset:2px; }

/* Dots */
.rayo-dots{
    position:absolute; left:0; right:0; bottom:10px;
    display:flex; gap:8px; justify-content:center; align-items:center;
}
.rayo-dot{
    width:12px; height:12px; border-radius:50%; border:none;
    background:rgba(255,255,255,.6); cursor:pointer;
}
.rayo-dot.is-active{ background:#000; }

/* Aspect ratio específico para móvil (fallback, ya que PHP inyecta el real) y ancho máximo */
.rayo-slider-mobile {
    aspect-ratio: 1 / 1; /* Fallback */
    max-width: 768px;    /* Límite de ancho solicitado */
    margin: 0 auto;      /* Centrado */
}

/* Responsivo: lógica de mostrar/ocultar */
@media (max-width: 768px){
    .rayo-slider[data-hide-on-mobile="1"]{ display:none; }
    /* En móvil, el slider desktop puede tener altura diferente */
    .rayo-slider-desktop:not([data-hide-on-mobile="1"]) {
        aspect-ratio: 1920 / 500; /* Mantener ratio desktop en móvil si se muestra */
    }
}
@media (min-width: 769px){
    .rayo-slider[data-only-mobile="1"]{ display:none; }
}


/* Mostrar slider de escritorio también en tablets verticales (hasta 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  .rayo-slider-desktop[data-hide-on-mobile="1"] {
    display: block !important;
    visibility: visible !important;
  }
}
/* === FIX para tablets verticales (769px a 1024px) === */

/* Fuerza la visibilidad del slider de escritorio en tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  .rayo-slider-desktop[data-hide-on-mobile="1"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Asegura que el móvil permanezca oculto */
  .rayo-slider-mobile[data-only-mobile="1"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}