/* ==========================================================================
   12. DRY ICE VAPOR OVERLAYS & MOBILE RESPONSIVE UI ADAPTATION
   ========================================================================== */

/* Dry Ice Steam / Subzero Vapor Effect Overlay for Glasses & Cards */
.dry-ice-fog-container {
  position: relative;
  overflow: hidden;
}

.dry-ice-steam-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 75%, rgba(255, 230, 240, 0.45) 0%, rgba(255, 30, 70, 0.3) 30%, rgba(140, 5, 25, 0.15) 55%, transparent 80%);
  mix-blend-mode: screen;
  animation: dryIceSteamFlow 4s ease-in-out infinite alternate;
}

@keyframes dryIceSteamFlow {
  0% {
    opacity: 0.45;
    transform: translateY(12px) scale(0.96);
    filter: blur(12px);
  }
  50% {
    opacity: 0.85;
    transform: translateY(-6px) scale(1.06);
    filter: blur(20px);
  }
  100% {
    opacity: 0.6;
    transform: translateY(-14px) scale(1.12);
    filter: blur(16px);
  }
}

/* ==========================================================================
   MOBILE UI RESPONSIVE ADAPTATION (TABLETS & MOBILE PHONES)
   ========================================================================== */

/* Tablets & Small Laptops (max-width: 992px) */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
    text-align: center;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .photo-collage-container {
    max-width: 480px;
    gap: 14px;
    padding: 10px;
  }

  .collage-card {
    height: 220px;
  }

  .prep-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .prep-img-wrapper {
    height: 340px;
  }

  .ingredients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .ingredient-img-wrapper {
    height: 320px;
  }

  .essence-pillars-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .carousel-card {
    width: 250px;
    height: 170px;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .payment-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  /* The 3-column lone-item centering trick doesn't apply once the grid
     drops to 2 columns — let the 7th card sit in its natural column. */
  .payment-card:nth-child(3n+1):last-child {
    grid-column: auto;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  .snap-section {
    padding: 85px 0 50px 0;
  }

  /* Pill Navbar Mobile Adaptation */
  .pill-navbar-container {
    top: 14px;
    padding: 0 10px;
  }

  .pill-navbar {
    min-width: unset;
    width: 96%;
    padding: 8px 16px;
    gap: 12px;
  }

  .brand-name {
    font-size: 0.95rem;
    letter-spacing: 2px;
  }

  .nav-brand-emblem {
    width: 30px;
    height: 30px;
  }

  .nav-links {
    gap: 12px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    font-size: 0.78rem;
    letter-spacing: 0.5px;
  }

  /* Section Typography Mobile */
  .section-title {
    font-size: 1.6rem;
    letter-spacing: 3px;
  }

  .section-subtitle {
    font-size: 0.92rem;
  }

  /* Hero Section Mobile */
  .hero-title {
    font-size: 2.8rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
    letter-spacing: 2px;
  }

  .photo-collage-container {
    max-width: 340px;
    gap: 12px;
    padding: 8px;
  }

  .collage-card {
    height: 165px;
    border-radius: 14px;
  }

  /* Preparación Section Mobile */
  .prep-steps-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .prep-img-wrapper {
    height: 360px;
  }

  /* Ingredientes Section Mobile */
  .ingredients-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ingredient-img-wrapper {
    height: 340px;
  }

  /* Video & Carousel Mobile */
  .party-video-container {
    width: 100%;
    margin-bottom: 20px;
  }

  .nebula-video.party-video {
    max-height: 240px;
  }

  .carousel-card {
    width: 200px;
    height: 135px;
  }

  /* Esencia Section Mobile */
  .museum-quote p {
    font-size: 1.9rem;
  }

  .museum-badge-seal {
    width: 95px;
    height: 95px;
  }

  /* Hacé tu Pedido (WhatsApp CTA) Mobile */
  .whatsapp-cta {
    flex-direction: column;
    text-align: center;
    padding: 24px 28px;
    gap: 14px;
  }

  .whatsapp-cta-text {
    align-items: center;
    text-align: center;
  }

  /* Equipo & Métodos de Pago Sections Mobile */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

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

  .payment-card:nth-child(3n+1):last-child {
    grid-column: auto;
  }
}

/* Extra Small Phones (max-width: 480px) */
@media (max-width: 480px) {
  .hero-title {
    font-size: 2.3rem;
  }

  .photo-collage-container {
    max-width: 290px;
    gap: 10px;
  }

  .collage-card {
    height: 140px;
  }

  .prep-img-wrapper {
    height: 300px;
  }

  .ingredient-img-wrapper {
    height: 300px;
  }

  .carousel-card {
    width: 170px;
    height: 115px;
  }
}