/* =========================================================
   SLIDER DE CATEGORÍAS - FRONT PAGE
   Solo se carga en la portada (ver functions.php)
   Flechas y puntos: js/categorias-slider.js
========================================================= */

@media (min-width: 768px) {
  /*
   * Slider de categorías de la portada: si las 5 no caben en el ancho,
   * la fila se desplaza horizontalmente con scroll-snap.
   * Si caben, quedan centradas como antes (safe center).
   */
  .categorias-desktop {
    flex-wrap: nowrap;
    justify-content: safe center;

    min-width: 0;
    max-width: 100%;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Espacio para el hover (sube 5px + sombra) sin que lo recorte el overflow */
    padding: 12px 20px 24px;
    margin: -12px 0 -24px;
  }

  .categorias-desktop {
    scrollbar-width: none;
  }

  .categorias-desktop::-webkit-scrollbar {
    display: none;
  }

  .categorias_item {
    scroll-snap-align: center;
  }
}


/*
 * Flechas y puntos del slider de categorías (creados por JS).
 * Solo se muestran cuando las categorías no caben en el ancho.
 */
.categorias-slider-arrow,
.categorias-slider-dots {
  display: none;
}

@media (min-width: 768px) {
  .categorias-front-page {
    position: relative;
  }

  .categorias-front-page.has-slider .categorias-slider-arrow {
    position: absolute;
    top: 50%; /* se ajusta al centro de las tarjetas desde JS */
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;
    margin-top: -22px;

    border: 0;
    border-radius: 50%;
    background: #000;
    color: #ffd500;

    font-size: 26px;
    line-height: 1;
    cursor: pointer;

    transition: opacity 0.2s ease;
  }

  .categorias-slider-arrow--prev {
    left: 8px;
  }

  .categorias-slider-arrow--next {
    right: 8px;
  }

  .categorias-slider-arrow:hover {
    opacity: 0.85;
  }

  .categorias-slider-arrow:disabled {
    opacity: 0;
    pointer-events: none;
  }

  .categorias-front-page.has-slider .categorias-slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;

    width: 100%;
    margin-top: 20px;
  }

  .categorias-slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background: #cfcfcf;

    cursor: pointer;
    transition:
      background 0.2s ease,
      transform 0.2s ease;
  }

  .categorias-slider-dot.is-active {
    background: #000;
    transform: scale(1.3);
  }
}