/* ============================================================
   WebSiteParaguay — desktop.css
   Mejoras de espaciado para pantallas medianas y grandes.
   Se carga DESPUÉS de main.css y mobile.css.
   Grupo SAT SRL | v1.0
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   BASE DESKTOP — aplica a todo lo que no sea mobile
   ══════════════════════════════════════════════════════════════ */

/* ── Container con padding generoso ────────────────────────── */
/* Screens > 768px: más aire en los costados */
@media (min-width: 769px) {

  /* El container nunca toca los bordes */
  .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Secciones con padding vertical cómodo */
  .section-pad    { padding: 96px 0 !important; }
  .section-pad-sm { padding: 64px 0 !important; }

  /* Navbar — solo ajuste de padding del contenedor interno */
  .navbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hero — más espacio y contenido mejor enmarcado */
  .hero-content {
    padding-top: 150px !important;
    padding-bottom: 110px !important;
  }
  .hero h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.4rem) !important;
    margin-bottom: 24px !important;
  }
  .hero-sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    margin-bottom: 44px !important;
  }
  .hero-actions { margin-bottom: 64px !important; }
  .hero-stats   { gap: 40px !important; }

  /* Section headers más respiro */
  .section-header    { margin-bottom: 64px !important; }
  .section-header h2 { font-size: clamp(2rem, 4vw, 2.8rem) !important; margin-bottom: 18px !important; }
  .section-header p  { font-size: 1.05rem !important; max-width: 580px !important; }

  /* Servicios — grid con gap generoso */
  .services-grid { gap: 28px !important; }
  .service-card  { padding: 40px 32px !important; border-radius: 18px !important; }
  .service-icon  { width: 58px !important; height: 58px !important; margin-bottom: 22px !important; border-radius: 15px !important; }
  .service-card h3 { font-size: 1.2rem !important; margin-bottom: 12px !important; }
  .service-card p  { font-size: .92rem !important; margin-bottom: 22px !important; }

  /* Productos / Planes */
  .products-grid { gap: 28px !important; }
  .product-card  { padding: 40px 32px !important; border-radius: 18px !important; }
  .product-card h3 { font-size: 1.35rem !important; margin-bottom: 10px !important; }
  .product-card .desc { margin-bottom: 26px !important; }
  .price-block   { margin-bottom: 30px !important; }
  .price-main    { font-size: 2.5rem !important; }
  .feature-list  { margin-bottom: 30px !important; }
  .feature-list li { padding: 8px 0 !important; font-size: .92rem !important; }

  /* Portfolio */
  .portfolio-grid { gap: 28px !important; }
  .portfolio-card { border-radius: 18px !important; }
  .portfolio-body { padding: 22px 26px !important; }
  .portfolio-body h3 { font-size: 1.08rem !important; margin-bottom: 5px !important; }

  /* Testimonios */
  .testimonials-grid { gap: 28px !important; }
  .testimonial-card  { padding: 34px !important; border-radius: 18px !important; }
  .testimonial-card p { font-size: 1rem !important; margin-bottom: 22px !important; }

  /* Quiénes somos */
  .about-grid    { gap: 72px !important; }
  .about-content h2 { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; margin-bottom: 20px !important; }
  .about-content p  { font-size: .98rem !important; margin-bottom: 18px !important; }
  .about-checklist  { margin: 28px 0 !important; }
  .about-checklist li { padding: 9px 0 !important; font-size: .96rem !important; }
  .about-badge {
    padding: 22px 28px !important;
    bottom: -24px !important;
    right: -24px !important;
    border-radius: 14px !important;
  }
  .about-badge .num   { font-size: 2.6rem !important; }
  .about-badge .label { font-size: .82rem !important; }

  /* FAQ */
  .faq-list      { max-width: 800px !important; }
  .faq-item      { margin-bottom: 14px !important; border-radius: 14px !important; }
  .faq-question  { padding: 22px 28px !important; font-size: 1rem !important; }
  .faq-answer.open { padding: 22px 28px !important; }
  .faq-answer p  { font-size: .96rem !important; line-height: 1.75 !important; }

  /* Contacto */
  .contact-grid      { gap: 70px !important; }
  .contact-info h3   { font-size: 1.75rem !important; margin-bottom: 22px !important; }
  .contact-info p    { font-size: .96rem !important; margin-bottom: 32px !important; }
  .contact-detail    { gap: 16px !important; margin-bottom: 22px !important; }
  .contact-detail .icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; }
  .contact-form .form-group { margin-bottom: 20px !important; }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 13px 18px !important;
    font-size: .96rem !important;
    border-radius: 10px !important;
  }
  .form-row { gap: 16px !important; }

  /* Page banner */
  .page-banner    { padding: 140px 0 68px !important; }
  .page-banner h1 { font-size: clamp(2.2rem, 4vw, 3.2rem) !important; margin-bottom: 14px !important; }
  .page-banner .breadcrumb { font-size: .9rem !important; }

  /* Footer */
  .footer-main { padding: 80px 0 60px !important; }
  .footer-grid { gap: 56px !important; }
  .footer-col h4 { font-size: .9rem !important; margin-bottom: 20px !important; letter-spacing: .06em !important; }
  .footer-col ul li { margin-bottom: 12px !important; }
  .footer-col ul li a { font-size: .9rem !important; }
  .footer-contact-item { font-size: .9rem !important; gap: 10px !important; margin-bottom: 14px !important; }
  .footer-socials a { width: 40px !important; height: 40px !important; border-radius: 9px !important; }
  .footer-bottom { padding: 26px 0 !important; font-size: .84rem !important; }

  /* Badge, alerts */
  .alert { padding: 16px 22px !important; border-radius: 10px !important; font-size: .95rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   MEDIUM — 1025px a 1280px
   Pantallas medianas donde el contenido se sentía más apretado
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1280px) {

  .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }



  /* Hero levemente más compacto en medium */
  .hero-content { padding-top: 130px !important; padding-bottom: 90px !important; }
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; }

  /* Grids en 2 columnas si no caben 3 */
  .services-grid  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
  .products-grid  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
  .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }

  /* Contact grid en medium */
  .contact-grid { gap: 48px !important; }

  /* About en medium */
  .about-grid { gap: 48px !important; }
}

/* ══════════════════════════════════════════════════════════════
   LARGE — 1281px en adelante
   Pantallas grandes, máximo espacio y elegancia
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1281px) {

  .container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }



  /* Hero a full en pantalla grande */
  .hero-content { padding-top: 160px !important; padding-bottom: 120px !important; }

  /* Servicios en 3 cols sólidas */
  .services-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .products-grid  { grid-template-columns: repeat(3, 1fr) !important; }
  .portfolio-grid { grid-template-columns: repeat(3, 1fr) !important; }
}