/* ==========================================================================
   CARRUSEL MÓVIL
   Catalina Casa de Té — https://mktactual.com/

   En el móvil, las rejillas de tarjetas (los talleres de la portada y los de
   la página de Talleres) dejan de ser una lista larguísima y pasan a
   deslizarse de lado, con puntos de navegación y flechas.

   El desplazamiento lo hace el propio navegador con scroll-snap: se mueve con
   el dedo, con inercia, y encaja solo en cada tarjeta. No hace falta ninguna
   librería. El JavaScript (assets/js/carrusel.js) solo añade los controles y
   marca en qué tarjeta estás.

   En escritorio no se activa nada: las rejillas siguen siendo rejillas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Los controles no existen en escritorio
   -------------------------------------------------------------------------- */
.catalina-carrusel-controles {
  display: none;
}

/* ==========================================================================
   MÓVIL Y TABLETA VERTICAL — aquí sí se convierte en carrusel
   ========================================================================== */
@media (max-width: 768px) {

  /* --- La rejilla se convierte en pista deslizable ---
     Se nombran las rejillas directamente, no la clase que pone el
     JavaScript: así el carrusel funciona (se desliza con el dedo) aunque el
     JavaScript no llegue a ejecutarse. El JS solo añade flechas y puntos. */
  .catalina-workshops .talleres-container,
  .talleres-grid-section .talleres-container,
  .catalina-carrusel {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* El relleno lateral hace que la primera y la última tarjeta queden
       alineadas con el resto del contenido, y no pegadas al filo. */
    padding: 4px 18px 6px;
    margin: 0 -18px;

    /* La barra de desplazamiento se oculta: ya están los puntos. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .catalina-workshops .talleres-container::-webkit-scrollbar,
  .talleres-grid-section .talleres-container::-webkit-scrollbar,
  .catalina-carrusel::-webkit-scrollbar {
    display: none;
  }

  /* --- Cada tarjeta ocupa casi toda la pantalla ---
     El trozo que asoma de la siguiente es intencionado: es lo que le dice
     al visitante que puede seguir deslizando. */
  .catalina-workshops .talleres-container > *,
  .talleres-grid-section .talleres-container > *,
  .catalina-carrusel > * {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Las animaciones de entrada por scroll se desactivan dentro del carrusel:
     al estar en horizontal, muchas tarjetas nunca entraban en pantalla y se
     quedaban invisibles para siempre. */
  .catalina-workshops .talleres-container > .catalina-animate,
  .talleres-grid-section .talleres-container > .catalina-animate,
  .catalina-carrusel > .catalina-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* --------------------------------------------------------------------------
     Controles: flechas y puntos
     -------------------------------------------------------------------------- */
  .catalina-carrusel-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
  }

  .catalina-carrusel-flecha {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(164, 94, 68, 0.28);
    background: #fff;
    color: var(--catalina-terracotta);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(164, 94, 68, 0.10);
    transition: background 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, opacity 0.25s ease;
  }

  .catalina-carrusel-flecha:hover,
  .catalina-carrusel-flecha:focus-visible {
    background: var(--catalina-terracotta);
    border-color: var(--catalina-terracotta);
    color: #fff;
  }

  /* Al llegar al principio o al final, la flecha correspondiente se apaga. */
  .catalina-carrusel-flecha[disabled] {
    opacity: 0.3;
    cursor: default;
    box-shadow: none;
  }

  .catalina-carrusel-flecha[disabled]:hover {
    background: #fff;
    color: var(--catalina-terracotta);
    border-color: rgba(164, 94, 68, 0.28);
  }

  /* --- Puntos --- */
  .catalina-carrusel-puntos {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .catalina-carrusel-punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(164, 94, 68, 0.26);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
  }

  .catalina-carrusel-punto.esta-activo {
    width: 26px;
    border-radius: 5px;
    background: var(--catalina-terracotta);
  }

  /* Área de pulsación cómoda sin agrandar el punto a la vista. */
  .catalina-carrusel-punto {
    position: relative;
  }

  .catalina-carrusel-punto::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
  }

  /* --- Texto de ayuda: "Desliza para ver más" --- */
  .catalina-carrusel-pista {
    display: block;

    /* Ocupa toda la fila para caer DEBAJO de las flechas y los puntos,
       en vez de ponerse a su lado. */
    flex: 0 0 100%;
    margin-top: 2px;
    text-align: center;
    font-family: var(--catalina-font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--catalina-brown);
    opacity: 0.75;
  }

  /* Cuando ya has deslizado, la ayuda sobra. */
  .catalina-carrusel-usado + .catalina-carrusel-controles .catalina-carrusel-pista {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Móvil pequeño: la tarjeta ocupa un poco más
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .catalina-carrusel > * {
    flex-basis: 88%;
    max-width: 88%;
  }

  .catalina-carrusel {
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   Quien pidió menos animación, sin desplazamiento suave
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .catalina-carrusel {
    scroll-behavior: auto;
  }
}