/* ══════════════════════════════════════════════════════════════
   EL OTRO BANDO — Responsive
   Mobile-first breakpoints
   ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════
   BREAKPOINTS:
   - Mobile:  < 640px  (default / base styles)
   - Tablet:  640px - 1023px
   - Desktop: 1024px+
   - Wide:    1280px+
   ═══════════════════════════════════ */


/* ── Mobile (base - hasta 639px) ── */

@media (max-width: 639px) {

  /* Header */
  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .header-actions .btn {
    display: none;
  }

  .site-header__inner {
    height: 80px;
  }

  .site-logo img {
    max-height: 60px;
  }

  .mobile-nav {
    top: 80px;
    height: calc(100vh - 80px);
  }

  /* Grids colapsan a 1 columna */
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--content {
    grid-template-columns: 1fr;
  }

  .grid--products {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Section padding reduce */
  .section {
    padding: var(--space-2xl) 0;
  }

  .section--lg {
    padding: var(--space-3xl) 0;
  }

  /* Page hero */
  .page-hero {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .page-hero__title {
    font-size: var(--text-4xl);
  }

  /* Product cards en mobile: imagen más pequeña */
  .product-card__image {
    aspect-ratio: 16/10;
  }

  /* Order window vertical */
  .order-window {
    flex-direction: column;
    text-align: center;
  }

  /* Section header vertical */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* WA float más pequeño */
  .wa-float {
    width: 52px;
    height: 52px;
    bottom: var(--space-md);
    right: var(--space-md);
  }

  .wa-float svg {
    width: 28px;
    height: 28px;
  }

  .wa-float__tooltip {
    display: none;
  }

  /* Toast más pequeño */
  .toast {
    left: var(--space-md);
    right: var(--space-md);
    max-width: none;
  }
}


/* ── Tablet (640px - 1023px) ── */

@media (min-width: 640px) and (max-width: 1023px) {

  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Grids 2 columnas */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--content {
    grid-template-columns: 1fr;
  }

  .grid--products {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer 2 cols */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
}


/* ── Desktop (1024px+) ── */

@media (min-width: 1024px) {

  .hamburger {
    display: none;
  }

  .main-nav {
    display: flex;
  }

  .mobile-nav {
    display: none !important;
  }
}


/* ── Wide (1280px+) ── */

@media (min-width: 1280px) {

  .site-header__inner {
    height: 80px;
  }

  .main-nav__link {
    padding: var(--space-sm) var(--space-md);
  }
}


/* ═══════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════ */

@media print {
  .site-header,
  .site-footer,
  .wa-float,
  .toast,
  .hamburger,
  .mobile-nav {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  .section {
    padding: 1rem 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}


/* ═══════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .ticker-strip__inner {
    animation: none;
  }
}