/* ===== RESPONSIVE.CSS - MÓVILES Y TABLETS ===== */

/* =========================================
   TABLETS Y PANTALLAS MEDIANAS (< 980px)
   ========================================= */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__features { grid-template-columns: 1fr; }
  .twoCol { grid-template-columns: 1fr; }
  .twoCol--map { grid-template-columns: 1fr; }
  .productPlaceholder { grid-template-columns: 1fr; }
  .reviewsGrid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__logo.right img { margin: 0 auto; }
  .mosaic { grid-template-columns: 1fr; }
  .mosaic__item--big { grid-column: auto; }
}

/* =========================================
   MÓVILES (< 820px)
   ========================================= */
@media (max-width: 820px) {
  /* Menú Hamburguesa */
  .nav-toggle { display: flex; }
  
  .nav {
    position: fixed; top: 70px; left: 0; right: 0; bottom: 0;
    background: #fff; padding: 20px; gap: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 1001;
    flex-direction: column;
    transform: translateX(-100%); transition: transform 0.3s ease;
  }
  .nav.active { transform: translateX(0); }
  
  .nav__link {
    width: 100%; justify-content: space-between;
    padding: 15px 20px; font-size: 1.1rem; color: #333;
    border-left: 4px solid transparent; background: #f8f9fa;
  }
  .nav__link:hover {
    background: #f0f8ff; border-left-color: #19376D; color: #19376D;
  }
  
  /* Ajustes generales */
  .cards3 { grid-template-columns: 1fr; }
  .sliderBtn { display: none; }
  .slider { min-height: 260px; }
  body.menu-open { overflow: hidden; }

  /* Header Carrito/Checkout/Orden */
  .header-content { flex-direction: column; text-align: center; gap: 15px; }
  .nombre-negocio { margin: 15px 0; }
  .carrito-container, .checkout-container, .orden { padding: 20px; margin: 0; }
  
  /* Tabla responsive (scroll horizontal) */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Lista de productos en orden (columna en móvil) */
  .productos-lista li { flex-direction: column; gap: 10px; }
  .producto-precio {
    text-align: left; width: 100%;
    border-top: 1px dashed #ddd; padding-top: 10px;
  }
  
  /* Botones a ancho completo */
  .acciones-section, .acciones-formulario { flex-direction: column; }
  .acciones-section .btn, .acciones-formulario .btn,
  .btn-whatsapp, .btn-descargar { width: 100%; max-width: none; }

  /* Header especial logos */
  .logo-izquierdo, .logo-derecho { max-height: 60px; max-width: 120px; }
  
  /* Servicios y carrusel */
  .servicio-card, .feature-card, .card { margin-left: 0; margin-right: 0; padding: 0.9rem 1rem; max-width: 100%; }
  .carousel-container, .banner-section, .image-carousel { padding: 0 0.5rem 1rem 0.5rem; }
  .carousel-inner, .banner-image { border-radius: 10px; }
  .servicio-card__title { font-size: 0.9rem; }
  .servicio-card__desc { font-size: 0.75rem; }
}

/* =========================================
   MÓVILES PEQUEÑOS (< 420px)
   ========================================= */
@media (max-width: 420px) {
  .brand__title { font-size: 14px; }
  .brand__subtitle { font-size: 11px; }
  .brand__logo { width: 52px; height: 52px; }
  
  /* Reseñas en móvil */
  #resenas .reviewForm, #resenas .reviewList { max-width: 380px; margin: 0 auto; }
  .servicio-card { padding: 0.9rem 1rem; }
  
  /* Títulos más pequeños */
  .nombre-negocio { font-size: 24px; }
  h1 { font-size: 24px; }
  .seccion-formulario h2 { font-size: 20px; }
  .orden h2 { font-size: 22px; }
  .orden .subtitulo { font-size: 18px; }
  
  /* Contenedores con padding */
  body, .main-container, .container, #main-content {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
    box-sizing: border-box;
  }
}

/* =========================================
   TABLETS INTERMEDIAS (769px - 1024px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .servicio-card, .feature-card { padding: 1.2rem; }
  .carousel-container { padding: 0 1.5rem 1.5rem 1.5rem; }
}

/* =========================================
   ESTILOS PARA IMPRESIÓN (ORDEN DE PAGO)
   ========================================= */
@media print {
  body { background: white; padding: 0; }
  
  .orden {
    box-shadow: none; border: none; padding: 0; max-width: 100%;
  }
  
  .btn-descargar, .btn-whatsapp,
  .acciones-section, .acciones-formulario,
  .nav, .header, .footer, .whatsapp,
  .nav-toggle, .slider, .hero {
    display: none !important;
  }
  
  .header-carrito, .header-checkout, .header-orden {
    box-shadow: none; padding: 10px 0;
  }
  
  .carrito-container, .checkout-container {
    box-shadow: none; border: 1px solid #ddd;
  }
}