/* =========================================
   responsive.css — Media queries
   RAQUEL & CHUS · Boda 2026
   ========================================= */

@media (max-width: 640px) {

  /* Fondo: en móvil quitamos el fixed para mejor rendimiento */
  body {
    background-color: var(--arena);
    margin-right: 7%;
    margin-left: 7%;
  }

  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Places the image behind your text/content */

    background-image: url('../images/backgrounds/mobile-background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Optional: Prevents modern iOS elastic scrolling bounce from breaking it */
    will-change: transform;
  }

  .itinerario-img-wrap {
    width: 100%;
    /* width: min(130vw, 1400px); */
    margin-left: 0;
    transform: none;
  }

  .itinerario-img-wrap .img-desktop {
    display: none;
  }

  .itinerario-img-wrap .img-mobile {
    display: block;
  }

  .historia-text {
    width: 100%;
    text-align: center;
  }

  .text-title {
    width: 100%;
    margin-bottom: 1rem;
  }

  #confirmacion {
    background-image: url('../images/backgrounds/mobile-confirmar-asistencia.svg');
  }

  .countdown-number {
    font-size: clamp(1rem, 1.8rem, 2.5rem);
  }

  .countdown-label {
    font-size: 0.75rem;
  }

  .couple-behind {
    width: min(86vw, 250px);
  }

  .falling-item {
    width: 140px;
  }
}

@media (max-width: 400px) {

  .countdown-number {
    font-size: 2.5rem;
  }
}