/* -------------------------------------------------------------
   COMPORTAMIENTO RESPONSIVO (MOBILE-FIRST)
   Invitación Digital - Margarita & Brasilio
   ------------------------------------------------------------- */

/* Ajustes para pantallas móviles estándar (max-width: 480px) */
@media screen and (max-width: 480px) {
  .corner-flower {
    width: 135px;
    height: 135px;
  }
}

/* Ajustes para pantallas muy pequeñas (Ej: iPhone SE, 320px) */
@media screen and (max-width: 360px) {
  html {
    font-size: 14px;
  }
  
  .hero-name {
    font-size: 4.5rem;
  }

  .corner-flower {
    width: 110px;
    height: 110px;
  }

  .polaroid-card {
    padding: 10px 10px 25px 10px;
  }

  .polaroid-card img {
    height: 200px;
  }

  .color-palette-container {
    gap: 10px;
  }

  .color-swatch {
    width: 38px;
    height: 38px;
  }

  .avoid-grid {
    gap: 12px;
  }

  .avoid-color-box {
    width: 32px;
    height: 32px;
  }
}

/* Ajustes para tablets (pantallas medianas) */
@media screen and (min-width: 768px) {
  body {
    background-color: #eae3db; /* Fondo estético de fondo */
    padding: 30px 0;
  }

  .invitation-wrapper {
    border-radius: 24px; /* Bordes redondeados simulando teléfono */
    min-height: calc(100vh - 60px);
    height: auto;
  }

  /* Ajustes en los elementos flotantes fijos en desktop */
  .back-to-top-fab {
    left: calc(50% - 220px); /* Alineado a la izquierda del contenedor centrado */
    right: auto;
  }

  .music-player-fab {
    right: calc(50% - 220px); /* Alineado a la derecha del contenedor centrado */
    left: auto;
  }
}

/* Ajustes de animaciones para mejor rendimiento en móviles */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}