/* ============================================================
   RESPONSIVE — mobile-first. Everything above is the phone
   layout; these blocks only add room as the viewport grows.
   ============================================================ */

/* ------------------------------------------------------------
   Small phones — protect the tightest widths first.
   ------------------------------------------------------------ */
@media (max-width: 360px) {
  :root { --txt-7xl: 6.5rem; --txt-5xl: 2.375rem; }
  .hero__numero { width: 180px; height: 132px; }
  .hero__siete { line-height: 132px; -webkit-text-stroke-width: 6px; }
  .tipo { font-size: 9px; padding: 7px 2px; }
  .cartel__grid { gap: var(--sp-1); }
}

/* ------------------------------------------------------------
   Large phones / small tablets
   ------------------------------------------------------------ */
@media (min-width: 560px) {
  .regalos__grid { grid-template-columns: repeat(3, 1fr); }
  .galeria__tira { justify-content: center; }
}

/* ------------------------------------------------------------
   Desktop — the invitation becomes a card floating in a garden.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  :root {
    --txt-3xl: 2rem;
    --txt-4xl: 2.5rem;
    --txt-5xl: 3.25rem;
    --txt-7xl: 9.5rem;
  }

  body { background: transparent; }

  .escena__capa--colinas,
  .escena__capa--pasto { display: block; }

  .invitacion {
    max-width: var(--ancho-col-desktop);
    margin: var(--sp-10) auto var(--sp-12);
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(150, 100, 90, 0.28), 0 0 0 10px rgba(255, 255, 255, 0.6);
  }

  .hero { padding-top: var(--sp-12); }
  .hero__numero { width: 260px; height: 190px; }
  .hero__siete { line-height: 190px; -webkit-text-stroke-width: 10px; }
  .hero__retrato { width: 330px; }

  .seccion { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .seccion--sin-lados { padding-left: 0; padding-right: 0; }

  .galeria__tira { padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .itinerario__riel { padding-left: var(--sp-8); padding-right: var(--sp-8); }

  .mapa iframe { height: 240px; }

  .rsvp { padding-left: var(--sp-8); padding-right: var(--sp-8); }

  /* Guest rows get room for name and type side by side. */
  .invitado {
    display: grid;
    grid-template-columns: 1fr 232px;
    align-items: center;
    gap: var(--sp-3);
  }

  .invitado .tipos { margin-top: 0; }

  /* The floating CTA moves out of the thumb zone into the corner. */
  .cta-flotante {
    left: auto;
    right: var(--sp-8);
    bottom: var(--sp-8);
    margin-inline: 0;
    transform: translateY(160%);
  }

  .cta-flotante.visible { transform: translateY(0); }

  /* Ambient life is more generous when there is more canvas. */
  .capa--petalos { opacity: 1; }
}

/* ------------------------------------------------------------
   Wide desktop — let the side garden breathe.
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  .escena__sol { width: 460px; height: 460px; margin-left: -230px; top: -120px; }
  .invitacion { margin-top: var(--sp-12); }
}

/* ------------------------------------------------------------
   Pantallas de poca altura — que la portada entre sin scroll.
   ------------------------------------------------------------ */
@media (max-height: 720px) {
  .portada { gap: var(--sp-3); padding-top: var(--sp-3); }
  .portada__cartel { width: min(300px, 76vw); padding-top: 32px; }
  .portada__nombre { font-size: clamp(2rem, 9vw, 2.7rem); }
  .portada__siete { font-size: clamp(1.6rem, 6.5vw, 2.1rem); -webkit-text-stroke-width: 3px; }
  .portada__edad { gap: 3px 6px; font-size: var(--txt-sm); }
  .portal { width: min(232px, 54vw); }
  .portada__titulo { margin-top: var(--sp-2); font-size: var(--txt-xl); }
}

@media (max-height: 580px) {
  .portada__cartel { padding-top: 26px; }
  .portada__kicker { font-size: 9px; }
  .portal { width: min(190px, 46vw); }
}

/* ------------------------------------------------------------
   Coarse pointers: no cursor trail, bigger hit areas.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  .capa--chispas { display: none; }
  .contador__boton { width: 52px; height: 52px; }
  .tipo { padding: 10px 3px; }
}

/* ------------------------------------------------------------
   Print — a clean, ink-friendly version of the essentials.
   ------------------------------------------------------------ */
@media print {
  .escena, .capa, .portada, .cta-flotante, .mapa, .audio-oculto { display: none !important; }
  .invitacion { box-shadow: none; max-width: 100%; margin: 0; }
  .revela { opacity: 1; transform: none; }
  body { background: #fff; }
}