/* ============================================================
   WebSiteParaguay — mobile.css
   Mejoras exclusivas para mobile (cargado DESPUÉS de main.css)
   Grupo SAT SRL | v1.0
   ============================================================ */

/* ── Tablet (≤ 1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-grid     { grid-template-columns: 1fr !important; gap: 48px !important; }
  .contact-grid   { grid-template-columns: 1fr !important; gap: 40px !important; }
  .footer-grid    { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
  .services-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .products-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Mobile (≤ 768px) ───────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Espaciado base — el problema principal ─────────────── */
  /* El container NUNCA debe tocar los bordes */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Secciones con menos padding vertical */
  .section-pad    { padding: 52px 0 !important; }
  .section-pad-sm { padding: 36px 0 !important; }

  /* ── Navbar ─────────────────────────────────────────────── */
  .navbar { padding: 0 16px !important; }
  .nav-links, .nav-cta { display: none !important; }
  .hamburger { display: block !important; }

  /* Mobile menu */
  .mobile-menu         { padding: 20px 20px !important; }
  .mobile-menu a       { padding: 13px 0 !important; font-size: .95rem !important; }

  /* ── Hero ───────────────────────────────────────────────── */
  .hero-content {
    padding-top: 110px !important;
    padding-bottom: 60px !important;
  }
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }
  .hero-sub {
    font-size: .95rem !important;
    margin-bottom: 28px !important;
  }
  .hero-eyebrow {
    font-size: .72rem !important;
    padding: 5px 12px !important;
    margin-bottom: 18px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 36px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero-stats {
    gap: 16px 28px !important;
    flex-wrap: wrap !important;
  }
  .stat-number { font-size: 1.7rem !important; }
  .stat-label  { font-size: .75rem !important; }

  /* ── Section headers ─────────────────────────────────────── */
  .section-header        { margin-bottom: 36px !important; }
  .section-header h2     { font-size: 1.7rem !important; }
  .section-header p      { font-size: .93rem !important; }

  /* ── Servicios — 1 columna ──────────────────────────────── */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .service-card {
    padding: 28px 22px !important;
    border-radius: 14px !important;
  }
  .service-icon {
    width: 48px !important; height: 48px !important;
    font-size: 1.2rem !important; border-radius: 12px !important;
    margin-bottom: 14px !important;
  }
  .service-card h3 { font-size: 1.05rem !important; }
  .service-card p  { font-size: .88rem !important; margin-bottom: 16px !important; }
  .service-actions { gap: 8px !important; }

  /* ── Productos — 1 columna ──────────────────────────────── */
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .product-card {
    padding: 28px 22px !important;
    border-radius: 14px !important;
  }
  .product-badge { top: -12px !important; }
  .price-main    { font-size: 2rem !important; }
  .feature-list li { font-size: .88rem !important; padding: 6px 0 !important; }

  /* ── Portfolio — 1 columna ──────────────────────────────── */
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .portfolio-card   { border-radius: 14px !important; }
  .portfolio-thumb  { aspect-ratio: 16/9 !important; }
  .portfolio-body   { padding: 16px 18px !important; }
  .portfolio-body h3 { font-size: 1rem !important; }

  /* ── Testimonios — 1 columna ────────────────────────────── */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .testimonial-card { padding: 22px 20px !important; border-radius: 14px !important; }
  .testimonial-card p { font-size: .9rem !important; }

  /* ── Quiénes somos ──────────────────────────────────────── */
  .about-grid    { grid-template-columns: 1fr !important; gap: 52px !important; }
  .about-img-wrap { max-width: 100% !important; }
  .about-content h2 { font-size: 1.6rem !important; }
  .about-badge {
    right: 0 !important;
    bottom: -14px !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
  }
  .about-badge .num   { font-size: 1.8rem !important; }
  .about-badge .label { font-size: .72rem !important; }
  .about-checklist li { font-size: .9rem !important; padding: 7px 0 !important; }

  /* ── FAQ ─────────────────────────────────────────────────── */
  .faq-list      { margin: 0 !important; }
  .faq-item      { border-radius: 10px !important; margin-bottom: 10px !important; }
  .faq-question  { padding: 16px 18px !important; font-size: .92rem !important; line-height: 1.4 !important; }
  .faq-answer.open { padding: 14px 18px !important; }
  .faq-answer p  { font-size: .88rem !important; }

  /* ── Formulario de contacto ──────────────────────────────── */
  .contact-grid  { grid-template-columns: 1fr !important; gap: 36px !important; }
  .contact-info h3 { font-size: 1.4rem !important; }
  .contact-info p  { font-size: .92rem !important; }
  .contact-detail  { gap: 12px !important; margin-bottom: 16px !important; }
  .contact-detail .icon {
    width: 40px !important; height: 40px !important;
    font-size: .9rem !important; border-radius: 9px !important;
    flex-shrink: 0 !important;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 11px 14px !important;
    font-size: .92rem !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .contact-form .form-group { margin-bottom: 14px !important; }

  /* ── Page banner ─────────────────────────────────────────── */
  .page-banner    { padding: 100px 0 40px !important; }
  .page-banner h1 { font-size: 1.8rem !important; margin-bottom: 8px !important; }
  .page-banner .breadcrumb { font-size: .82rem !important; }

  /* ── Sección CTA (home) ─────────────────────────────────── */
  section[style*="linear-gradient"] > .container h2 {
    font-size: 1.6rem !important;
  }
  section[style*="linear-gradient"] > .container > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 12px !important;
  }
  section[style*="linear-gradient"] > .container .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .footer-grid  { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-main  { padding: 44px 0 32px !important; }
  .footer-col h4 { font-size: .82rem !important; margin-bottom: 12px !important; }
  .footer-col ul li { margin-bottom: 8px !important; }
  .footer-col ul li a { font-size: .85rem !important; }
  .footer-contact-item { font-size: .82rem !important; gap: 8px !important; }
  .footer-socials { gap: 8px !important; }
  .footer-socials a { width: 34px !important; height: 34px !important; font-size: .85rem !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 18px 0 !important;
    font-size: .78rem !important;
  }

  /* ── WhatsApp float ──────────────────────────────────────── */
  .wa-float {
    width: 50px !important; height: 50px !important;
    bottom: 20px !important; right: 16px !important;
    font-size: 1.3rem !important;
  }

  /* ── Botones globales ─────────────────────────────────────── */
  .btn-lg { padding: 13px 24px !important; font-size: .95rem !important; }

  /* ── Timeline (quiénes somos) ────────────────────────────── */
  .timeline-item > div:first-child { width: 60px !important; }

  /* ── Stats 4 col → 2 col (quiénes somos) ────────────────── */
  .testimonials-bg .container > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* ── Small phones (≤ 480px) ─────────────────────────────────── */
@media (max-width: 480px) {

  /* Márgenes mínimos — nunca pegado al borde */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-pad { padding: 40px 0 !important; }

  /* Hero más compacto */
  .hero-content { padding-top: 96px !important; padding-bottom: 48px !important; }
  .hero h1      { font-size: 1.7rem !important; }
  .hero-sub     { font-size: .9rem !important; }
  .stat-number  { font-size: 1.45rem !important; }

  /* Tipografía de sección */
  .section-header h2 { font-size: 1.45rem !important; }
  .section-label     { font-size: .72rem !important; }

  /* Cards más compactas */
  .service-card,
  .product-card     { padding: 22px 18px !important; border-radius: 12px !important; }
  .testimonial-card { padding: 18px 16px !important; border-radius: 12px !important; }

  /* FAQ */
  .faq-question  { padding: 13px 15px !important; font-size: .87rem !important; }
  .faq-answer.open { padding: 12px 15px !important; }

  /* Contacto inputs más táctiles */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 12px 13px !important;
    font-size: .88rem !important;
    border-radius: 9px !important;
  }

  /* Page banner */
  .page-banner    { padding: 88px 0 32px !important; }
  .page-banner h1 { font-size: 1.5rem !important; }

  /* Footer */
  .footer-brand > div:first-child { font-size: 1.2rem !important; }

  /* WhatsApp float */
  .wa-float {
    width: 46px !important; height: 46px !important;
    bottom: 16px !important; right: 12px !important;
    font-size: 1.15rem !important;
  }

  /* Feature list productos */
  .feature-list li { font-size: .83rem !important; }

  /* Botones en página de error 404 */
  .btn-lg {
    padding: 12px 20px !important;
    font-size: .9rem !important;
  }
}