/* ═══════════════════════════════════════════════════════════════
   PROMAQ – queries.css
   Solo media queries. Importar DESPUÉS de style.css.
   Breakpoints en em (más estables con zoom de browser):
     xl:  ≥ 75em  → 1200px
     lg:  ≤ 64em  → 1024px (laptops)
     md:  ≤ 48em  →  768px (tablets)
     sm:  ≤ 30em  →  480px (teléfonos)
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   XL — Pantallas grandes (≥ 75em ≈ 1200px)
   Activar layouts de múltiples columnas
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 75em) {
  /* Zonas: activar layout 2 columnas */
  .zonas-inner {
    grid-template-columns: 1fr 1fr;
  }
  .zonas-desc {
    max-width: 44rem;
  }

  /* Badges: 3 columnas en panel lateral */
  .badge-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 42rem;
  }

  /* Contacto: 2 columnas */
  .contacto-inner {
    grid-template-columns: 1fr 1.4fr;
  }

  /* Form rows: 2 columnas */
  .form-row {
    grid-template-columns: 1fr 1fr;
  }

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

  /* Stats: separadores verticales visibles */
  .stat-item:not(:last-child)::after {
    display: block;
  }

  /* Footer bottom horizontal */
  .footer-bottom {
    flex-direction: row;
  }
}

/* ══════════════════════════════════════════════════════════════
   LG — Laptops (≤ 64em ≈ 1024px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 64em) {
  .mobile-menu {
    display: flex;
    flex-direction: column;
    padding-bottom: clamp(2rem, 5vw, 4rem);
  }

  /* Navbar: mostrar hamburguesa, ocultar links */
  .nav-links {
    display: none;
  }
  .nav-burger {
    display: flex;
  }

  /* Servicios: máximo 2 columnas */
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
  }

  /* Zonas: stacked */
  .zonas-inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Badges: 3 columnas en una sola fila */
  .badge-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }

  /* Contacto: stacked */
  .contacto-inner {
    grid-template-columns: 1fr;
  }

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

  /* Stats: 4 cols siguen (auto-fit las maneja), sin separadores */
  .stat-item::after {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   MD — Tablets (≤ 48em ≈ 768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 48em) {
  /* Hero: botones en columna para no desbordarse */
  .hero-actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 36rem;
  }

  /* Servicios: 1 columna */
  .servicios-grid {
    grid-template-columns: 1fr;
  }

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

  /* Form rows: 1 columna */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer: 1 columna */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Footer bottom: centrado */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   SM — Teléfonos (≤ 30em ≈ 480px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 30em) {
  /* Forzar overflow oculto en body también */
  html,
  body {
    overflow-x: hidden;
  }

  /* Navbar isla: más compacta */
  .nav-island {
    max-width: 96vw;
  }

  /* Hero: botones apilados a ancho completo */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* Mobile overlay: links más chicos */
  .mobile-link {
    font-size: clamp(2.2rem, 7vw, 2.8rem);
  }

  /* Stats: 2 columnas compactas, sin separadores */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item::after {
    display: none;
  }

  /* Servicios: 1 columna forzada */
  .servicios-grid {
    grid-template-columns: 1fr;
  }

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

  /* Form: 1 columna */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer: 1 columna, bottom centrado */
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

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

  .hero-bg {
    transform: none !important;
    transition: none !important;
  }
  .clientes-track {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .eyebrow-dot {
    animation: none;
  }
  .scroll-wheel {
    animation: none;
  }
  .hero-title__line,
  .hero-content,
  .hero-eyebrow,
  .hero-sub,
  .hero-actions,
  .hero-scroll-hint {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   ACCESIBILIDAD — prefers-color-scheme (placeholder por si 
   en el futuro se agrega un tema claro)
   ══════════════════════════════════════════════════════════════ */
/* @media (prefers-color-scheme: light) { ... } */

/* ══════════════════════════════════════════════════════════════
   PRINT — eliminar decorativos para impresión
   ══════════════════════════════════════════════════════════════ */
@media print {
  #site-header,
  .fab-whatsapp,
  .mobile-overlay,
  .hero-scroll-hint,
  .clientes-ticker {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
  .hero {
    min-height: auto;
    padding: 4rem 0;
  }
  .hero-overlay,
  .hero-noise {
    display: none;
  }
  .hero-bg {
    filter: grayscale(1) brightness(0.3);
  }
}