/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 700px) {
  .section {
    padding-inline: 6vw;
  }

  .location-section {
    grid-template-columns: 1fr 1fr;
  }

  .location-section__image {
    min-height: 100svh;
  }

  .location-section__content {
    padding: var(--space-7);
  }

  .location-section--reverse .location-section__image {
    order: 2;
  }

  .location-section--reverse .location-section__content {
    order: 1;
  }
}

@media (min-width: 1100px) {
  .section {
    padding-inline: 8vw;
  }

  .photo-section__content {
    bottom: 10%;
  }
}

@media (max-width: 480px) {
  .countdown {
    gap: 0.25rem;
  }

  .countdown__item strong {
    font-size: 1.8rem;
  }

  .countdown__item span {
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }

  .dresscode__illustrations {
    gap: var(--space-2);
  }

  .dresscode__placeholder {
    min-height: 150px;
  }
}


/* =========================================================
   MÓVIL - PRIORIDAD PRINCIPAL
   ========================================================= */
@media (max-width: 699px) {
  .section {
    min-height: auto;
    padding: 72px 18px;
  }

  /* Portada: en móvil se vuelve alta para aprovechar la fotografía */
  .hero {
    aspect-ratio: auto;
    min-height: 78svh;
    padding: 0;
    background-position: center center;
  }

  .hero__inner {
    padding: 72px 18px;
  }

  .hero .display {
    font-size: clamp(4.2rem, 20vw, 6.4rem);
    line-height: 0.82;
  }

  .hero__flower {
    width: min(42vw, 190px);
  }

  .hero__flower--top-left {
    top: 0;
    left: -5%;
  }

  .hero__flower--bottom-right {
    right: -5%;
    bottom: 0;
  }

  .verse__flower {
    width: min(84vw, 330px);
  }

  .date-section__flower {
    width: min(80vw, 300px);
  }

  .countdown {
    width: 100%;
    gap: 0;
  }

  .countdown__item strong {
    font-size: clamp(1.65rem, 8vw, 2.4rem);
  }

  .timeline--serpentine {
    margin-top: 2.5rem;
  }

  .timeline__event {
    width: 88%;
    padding: 0.75rem 0.8rem;
  }

  .timeline__illustration {
    width: 72px;
    height: 72px;
  }

  .dresscode__illustrations {
    gap: 0.75rem;
  }

  .dresscode__image {
    min-height: 150px;
    height: 200px;
  }

  .confirmation__message-preview {
    font-size: 0.84rem;
  }

  .donation {
    padding: 70px 18px;
  }

  .donation__accounts {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .donation__qr-frame {
    width: min(48vw, 180px);
  }

  .donation__qr-card {
    max-width: 320px;
    padding: 22px 16px 20px;
  }
}