/* Controles del carrusel móvil: ocultos en pantallas anchas */
.mobile-swiper__nav {
  display: none;
}

@media (max-width: 768px) {
  /* El padding da aire a la sombra y al hover de las cards (overflow:hidden las cortaría); el margen negativo lo compensa. */
  .mobile-swiper {
    width: calc(100% + 2.4rem);
    max-width: none;
    min-width: 0;
    margin-inline: -1.2rem;
    overflow: hidden;
    padding: 1.2rem 1.2rem 2rem;
  }

  /* El wrapper pasa de grid a carrusel */
  .mobile-swiper .swiper-wrapper {
    display: flex;
    gap: 0;
    margin-top: 0;
  }

  .mobile-swiper .swiper-slide {
    height: auto;
  }

  /* Controles sutiles y centrados: flecha, puntos, flecha */
  .mobile-swiper__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 2rem;
  }

  .mobile-swiper__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-gray);
    cursor: pointer;
    transition: color var(--transition-base);
  }

  .mobile-swiper__arrow .material-symbols-outlined {
    font-size: 2rem;
    font-variation-settings: "wght" 300;
  }

  .mobile-swiper__arrow:hover,
  .mobile-swiper__arrow:focus-visible {
    color: var(--color-primary);
  }

  .mobile-swiper__arrow.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /* Swiper convierte el contenedor de puntos en una capa absoluta de ancho completo; lo devolvemos al flujo. */
  .mobile-swiper.swiper .mobile-swiper__dots {
    position: static;
    inset: auto;
    width: auto;
    transform: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .mobile-swiper__dot {
    width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 999rem;
    background-color: var(--color-gray);
    cursor: pointer;
    transition: width var(--transition-base), background-color var(--transition-base);
  }

  .mobile-swiper__dot.is-active {
    width: 2.4rem;
    background-color: var(--color-primary);
  }

  /* Why travel with us: contenido de las cards centrado en móvil */
  .why .card {
    text-align: center;
  }

  .why__icon {
    margin-inline: auto;
  }
}