@import 'colors.css';

/* ============================================================
   CARRUSEL EN MÓVIL — solo ≤760px. En escritorio queda grid.
   Se aplica a elementos con .mobile-carousel + .carousel-dots
   ============================================================ */

/* Puntitos: ocultos en escritorio */
.carousel-dots { display: none; }

@media (max-width: 760px) {
    /* El grid se convierte en carrusel horizontal con snap */
    .mobile-carousel {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 2px 10px;
        scrollbar-width: none;
        grid-template-columns: none;
    }
    .mobile-carousel::-webkit-scrollbar { display: none; }

    /* Cada tarjeta ocupa 84% y se centra → se asoma la siguiente (peek) */
    .mobile-carousel > * {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }

    /* En carrusel, las tarjetas se ven SIEMPRE (anula el reveal que las ocultaba) */
    .mobile-carousel > .reveal-init {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Puntitos */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 18px;
    }
    .carousel-dots button {
        width: 8px; height: 8px;
        border-radius: 50%;
        border: none;
        background: #cdd9e1;
        padding: 0;
        cursor: pointer;
        transition: background 0.25s ease, width 0.25s ease;
    }
    .carousel-dots button.active {
        background: var(--azul1);
        width: 22px;
        border-radius: 5px;
    }
    /* Sobre fondo azul (Valores está en claro; ¿elegirnos? en azul) se ajusta si hace falta */
    .why-grid.mobile-carousel ~ .carousel-dots button { background: rgba(255,255,255,0.4); }
    .why-grid.mobile-carousel ~ .carousel-dots button.active { background: #fff; }
}