/* =====================================================================
   responsive.css — Ajustes por tamaño de pantalla (Mobile First)
   ---------------------------------------------------------------------
   Base = móvil pequeño (360 px). Cada bloque suma sobre el anterior.
   Puntos cubiertos: 360 / 390 / 414 / 768 / 1024 / 1200 px
   ===================================================================== */

/* =====================================================================
   MÓVIL MUY PEQUEÑO — hasta 359 px (iPhone SE 1ª gen, Android básicos)
   ===================================================================== */
@media (max-width: 359px) {
  .section { padding: 40px 0; }
  .countdown { gap: 7px; }
  .countdown__box { padding: 14px 3px 11px; border-radius: 14px; }
  .countdown__num { font-size: 1.4rem; }
  .countdown__label { font-size: .6rem; letter-spacing: .1em; }
  .countdown__icon { display: none; }
  .glass { padding: 24px 18px; }
  .btn-premium--wa { padding: 15px 26px; font-size: 1rem; }
  .music-hint { display: none; }

  /* Mismo criterio que el bloque 360-575: 2 columnas, tarjetas chicas */
  .info-card { padding: 16px 10px; }
  .info-card__emoji { font-size: 1.5rem; margin-bottom: 6px; }
  .info-card__title { font-size: .95rem; margin-bottom: 4px; }
  .info-card__text { font-size: .82rem; line-height: 1.4; }
}

/* =====================================================================
   MÓVIL ESTÁNDAR — 360 px a 575 px (360 / 390 / 414)
   ---------------------------------------------------------------------
   Es el formato primordial: acá se prioriza que no quede espacio
   vacío entre bloques (menos padding, tarjetas más chicas y en 2
   columnas) antes que respirar de más como en desktop.
   ===================================================================== */
@media (min-width: 360px) and (max-width: 575.98px) {
  .section { padding: 44px 0; }
  .section--welcome { padding-top: 30px; }
  .section--cierre { padding: 56px 0 30px; }
  .section__lead { margin-bottom: 18px; }

  .countdown { gap: 8px; }
  .countdown__box { padding: 16px 4px 12px; }
  .gallery .swiper-slide { width: 82%; }

  /* Tarjetas del evento en 2 columnas: más chicas, sin tanto aire */
  .info-card { padding: 18px 12px; }
  .info-card__emoji { font-size: 1.6rem; margin-bottom: 6px; }
  .info-card__title { font-size: 1rem; margin-bottom: 4px; }
  .info-card__text { font-size: .86rem; line-height: 1.45; }

  .glass { padding: 26px 20px; }

  /* Cada pantalla tiene que entrar entera en el alto del celular. Estas
     medidas salieron de medir el resultado real en 390x664 (iPhone con
     la barra de Safari a la vista, que es el caso más apretado): con el
     espaciado de escritorio, bienvenida+contador y el cierre se pasaban
     y quedaban cortados. */
  .pantalla-grupo { gap: 16px; padding-top: 16px; }
  .welcome__text { margin-bottom: 12px; line-height: 1.6; }
  .footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cierre__title { margin-bottom: 8px; }
  .btn-ghost { margin-top: 14px; }
  .section--cierre { padding: 0; }
}

/* =====================================================================
   MARCO DEL VIDEO EN CELULAR VERTICAL
   ---------------------------------------------------------------------
   El video es horizontal: en una pantalla vertical sobra mucho espacio
   arriba y abajo. Ahí van las franjas blancas con los rótulos.
   Solo se muestran si la pantalla es claramente más alta que ancha.
   ===================================================================== */
@media (orientation: portrait) and (max-aspect-ratio: 3/4) {
  .intro__frame { display: flex; }
  .intro__video { border-radius: 14px; }
}

/* En pantallas altas y angostas el video se despega un poco del centro
   para que los dos rótulos respiren por igual. */
@media (orientation: portrait) and (max-aspect-ratio: 9/16) {
  .intro__frame--top    { top: calc(8vh + env(safe-area-inset-top, 0px)); }
  .intro__frame--bottom { bottom: calc(10vh + env(safe-area-inset-bottom, 0px)); }
}

/* Pantallas bajas (móvil apaisado o navegador con barras grandes) */
@media (max-height: 640px) and (orientation: portrait) {
  .hero { justify-content: center; padding-bottom: 26px; }
  .hero__subtitle { margin-bottom: 4px; }
}

/* =====================================================================
   TABLET VERTICAL — 576 px a 767 px
   ===================================================================== */
@media (min-width: 576px) {
  .glass { padding: 34px 30px; }
  .countdown { gap: 14px; max-width: 560px; }
  .countdown__box { padding: 22px 10px 18px; }
  .gallery .swiper-slide { width: 62%; }
}

/* =====================================================================
   TABLET — 768 px (iPad vertical)
   ===================================================================== */
@media (min-width: 768px) {
  .section { padding: 90px 0; }
  .section--welcome { padding-top: 60px; }

  .hero { justify-content: center; padding-bottom: 60px; }
  .hero__photo { --foto-alza: 60px; }
  .hero__content { max-width: 720px; }

  .glass { padding: 42px 38px; }
  .countdown { max-width: 620px; gap: 18px; }

  .gallery .swiper-slide { width: 46%; max-width: 380px; }

  .music-fab { width: 58px; height: 58px; right: 24px; bottom: 24px; }
  .music-hint { right: 92px; bottom: 36px; font-size: .88rem; }

  .intro__skip { right: 28px; bottom: 28px; font-size: .9rem; }
}

/* =====================================================================
   ESCRITORIO — 1024 px
   ===================================================================== */
@media (min-width: 1024px) {
  .section { padding: 110px 0; }

  /* En pantallas anchas el video crece hasta 1100 px, centrado;
     el marco claro es el mismo que en celular. */
  .intro__video { width: min(100%, 1100px); }

  .hero__photo-wrap { inset: 0; }
  .hero__photo { --foto-alza: 40px; }

  .info-card { padding: 32px 26px; }
  .gallery .swiper-slide { width: 32%; max-width: 360px; }

  /* Hover real solo en dispositivos con puntero fino */
  @media (hover: hover) and (pointer: fine) {
    .info-card:hover { transform: translateY(-8px) scale(1.015); }
  }
}

/* =====================================================================
   ESCRITORIO GRANDE — 1200 px+
   ===================================================================== */
@media (min-width: 1200px) {
  .hero__title { font-size: 5.4rem; }
  .gallery .swiper-slide { width: 26%; }
  .bg-decor__blob--1 { width: 520px; height: 520px; }
  .bg-decor__blob--3 { width: 560px; height: 560px; }
}

/* =====================================================================
   AJUSTES ESPECÍFICOS DE PLATAFORMA
   ===================================================================== */

/* iOS: 100vh incluye las barras del navegador. svh lo corrige;
   este fallback cubre Safari antiguo. */
@supports not (height: 100svh) {
  :root { --vh100: 100vh; }
  .hero { min-height: -webkit-fill-available; }
}

/* Navegadores sin backdrop-filter (Firefox Android antiguo):
   se usa fondo sólido para que el texto siga legible. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass,
  .countdown__box,
  .hero__eyebrow,
  .next-fab,
  .music-hint { background: rgba(255, 255, 255, .93); }
}

/* Impresión: versión limpia de la invitación */
@media print {
  .loader, .intro, .music-fab, .music-hint, .confetti-canvas,
  .next-fab, .btn-ghost, .bg-decor, .balloons-up,
  .swiper-button-prev, .swiper-button-next { display: none !important; }
  body { background: #fff; }
  .glass { box-shadow: none; border: 1px solid #ddd; background: #fff; }
}