/* ==========================================================================
   CARRUSEL DE COLECCIONES  —  assets/css/colecciones-carrusel.css
   --------------------------------------------------------------------------
   Reemplaza la grilla fija de 4 colecciones de la home por un carrusel
   horizontal con puntos indicadores (estilo Instagram).

   Por qué un carrusel con scroll nativo y no el carousel de Bootstrap:
   el de Bootstrap muestra una cantidad FIJA de elementos por diapositiva,
   así que habría que decidir de antemano si son 3, 4 o 5 y volver a tocar
   el código cada vez que cambie. Este usa scroll horizontal con "scroll-snap",
   que se adapta solo a la cantidad de colecciones que haya y trae el
   deslizamiento con el dedo en el celular sin JavaScript extra.

   No pisa ningún estilo existente: todas las clases empiezan con "cc-".
   Las clases .flip / .front / .flip-content / .flip-title se siguen usando
   tal cual están en cards.css para no perder los efectos actuales.
   ========================================================================== */

.cc-carrusel {
    position: relative;
    width: 100%;
}

/* --- Pista deslizable ---------------------------------------------------- */

.cc-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Oculta la barra de scroll sin perder la funcionalidad */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Internet Explorer / Edge viejo */
}

.cc-track::-webkit-scrollbar {  /* Chrome, Safari, Edge */
    display: none;
}

/* --- Cada colección ------------------------------------------------------ */

.cc-item {
    flex: 0 0 25%;          /* Escritorio: 4 a la vista, igual que antes */
    max-width: 25%;
    scroll-snap-align: start;
    padding: 0;
    margin: 0;
}

@media (max-width: 991.98px) {
    .cc-item {
        flex: 0 0 50%;      /* Tablet: 2 a la vista */
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .cc-item {
        flex: 0 0 85%;      /* Celular: 1 a la vista, dejando ver la siguiente */
        max-width: 85%;
    }
}

/* --- Título de la colección cuando NO hay imagen propia ------------------ */
/* Usa la misma tipografía de la marca para que se parezca a los títulos
   dibujados. .flip-title ya aporta la posición y la sombra desde cards.css. */

.cc-titulo-texto {
    font-family: 'Eames-Century-Modern-Light', Georgia, serif;
    font-size: 2rem;
    line-height: 1.1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    word-break: break-word;
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    .cc-titulo-texto { font-size: 1.6rem; }
}

@media (max-width: 575.98px) {
    .cc-titulo-texto { font-size: 2rem; }
}

/* --- Puntos indicadores -------------------------------------------------- */

.cc-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 0;
    list-style: none;
}

.cc-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d2c6dc;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.cc-dot:hover {
    background: #a98fc0;
}

.cc-dot.is-active {
    background: #724490;   /* violeta de la marca */
    transform: scale(1.35);
}

.cc-dot:focus {
    outline: 2px solid #724490;
    outline-offset: 2px;
}

/* Si hay una sola página no tiene sentido mostrar los puntos */
.cc-dots:empty,
.cc-carrusel[data-paginas="1"] .cc-dots {
    display: none;
}

/* --- Flechas (solo escritorio) ------------------------------------------- */

.cc-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    color: #724490;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .25s ease;
}

.cc-carrusel:hover .cc-flecha {
    opacity: 1;
}

.cc-flecha:hover {
    background: #fff;
}

.cc-flecha[disabled] {
    opacity: 0 !important;
    pointer-events: none;
}

.cc-flecha.cc-prev { left: 10px; }
.cc-flecha.cc-next { right: 10px; }

/* En pantallas táctiles las flechas estorban: se navega con el dedo */
@media (max-width: 991.98px) {
    .cc-flecha { display: none; }
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    .cc-track { scroll-behavior: auto; }
    .cc-dot { transition: none; }
}