/* ============================================
   MAKONETH - Responsive Design
   Optimizado 2026
   ============================================ */

/* === Pantallas grandes (max 1200px) === */
@media screen and (max-width: 1200px) {
  .contenedor { max-width: 95%; }
}

/* === Tablets y pantallas medianas (max 992px) === */
@media screen and (max-width: 992px) {
  .contenedor { max-width: 90%; }
  .header__grid { grid-template: auto / 1fr 2fr; }
  .servicios__grid { grid-template-columns: repeat(4, 1fr); }
  .popular__grid { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 24px; }
  .software__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .portada h1 { font-size: 40px; }
  .portada h2 { font-size: 20px; }
  .portada { height: 450px; }
  .portada__login { width: 300px; }
}

/* === Tablets peque~nas y moviles grandes (max 768px) === */
@media screen and (max-width: 768px) {
  .header__grid { grid-template: auto auto / 1fr; text-align: center; }
  .header__item:nth-child(1) { margin-left: 0; text-align: center; }
  .header__item:nth-child(2) { text-align: center; margin-top: 10px; }
  .header__item:nth-child(2) ul li { display: inline-block; margin: 5px; }

  .servicios__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .servicios__item { max-width: 100%; padding: 25px 15px; }
  .servicios__title h2 { font-size: 26px; }
  .bloque__servicios { padding: 40px 0; }

  .impresos__grid { grid-template-columns: 1fr; text-align: center; }
  .impresos__item:nth-child(1) h2 { font-size: 26px; }
  .impresos__item:nth-child(2) { text-align: center; }
  .impresos__item:nth-child(2) img { max-width: 80%; height: auto; }

  .popular__grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .popular__title h2 { font-size: 26px; }

  .compromiso__grid { grid-template-columns: 1fr; gap: 30px; }
  .bloque__compromiso { padding: 50px 0; }

  .software__grid { grid-template-columns: 1fr; max-width: 450px; margin-left: auto; margin-right: auto; }
  .software__title h2 { font-size: 26px; }
  .bloque__software { padding: 50px 0; }

  .footer-main { grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand__social { justify-content: center; }
  .footer-brand__desc { max-width: 480px; margin-left: auto; margin-right: auto; }
  .footer-col { padding: 5px 0; }

  .portada { height: 400px; }
  .portada h1 { font-size: 32px; padding: 0 0 15px 0; }
  .portada h2 { font-size: 18px; padding: 0 0 25px 0; }
  .portada .btn-hero { padding: 12px 28px; font-size: 14px; }
  .portada__login { display: none; }
  .portada__grid { justify-content: center; }
  .portada__texto { text-align: center; padding: 0 20px; }

  .testimonio__title h2 { font-size: 26px; }
  .bloque__testimonio { padding: 40px 0; }
}

/* === Moviles pequeños (max 480px) === */
@media screen and (max-width: 480px) {
  .header__item:nth-child(2) a { margin: 0 5px; font-size: 14px; }
  .header__item:nth-child(2) img { width: 25px !important; height: 25px !important; }

  .servicios__grid { grid-template-columns: 1fr; }
  .servicios__item { padding: 20px 15px; }

  .popular__grid { grid-template-columns: 1fr; }
  .popular__item img { width: 100%; max-width: 300px; }
  .popular__title h2 { font-size: 22px; }

  .portada { height: 350px; }
  .portada h1 { font-size: 26px; padding: 0 0 10px 0; }
  .portada h2 { font-size: 15px; padding: 0 0 20px 0; }
  .portada .btn-hero { padding: 10px 24px; font-size: 13px; }

  .footer-main { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .footer-brand { text-align: center; }
  .footer-brand__logo { justify-content: center; }
  .footer-brand__social { justify-content: center; }
  .footer-contact li { justify-content: center; }
  .footer-col h3 { font-size: 14px; }
  .footer-bottom p { font-size: 12px; }

  .software__card { padding: 25px 18px; }
  .software__card h3 { font-size: 18px; }
  .software__card-price .price { font-size: 24px; }
  .software__title h2 { font-size: 22px; }

  .compromiso__item h2 { font-size: 18px; }
  .compromiso__item img { width: 70px; height: 70px; }

  .impresos__item:nth-child(1) h2 { font-size: 22px; }
  .bloque__impresos { padding: 50px 0; }

  /* Modales en movil */
  .modal-dialog { margin: 10px; }
  .login_modal > div, .register_modal > div { width: 95%; margin: 10px auto; }
  .form_login, .form_register { padding: 20px; }
  .form_login input, .form_register input { width: 100%; box-sizing: border-box; }

  .scroll-top { bottom: 20px; right: 20px; width: 42px; height: 42px; font-size: 16px; }
}

/* === Performance === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fade-in { opacity: 1; transform: none; }
}

/* === Alto contraste === */
@media (prefers-contrast: high) {
  .header__item:nth-child(2) a { border: 1px solid currentColor; padding: 5px; }
  .servicios__item { border: 2px solid #000; }
  .software__card { border: 2px solid rgba(255,255,255,0.5); }
}

/* === Modo oscuro del sistema === */
@media (prefers-color-scheme: dark) {
  .bloque__servicios { background-color: #1a202c; }
  .bloque__servicios .servicios__title h2 { color: #f7fafc; }
  .bloque__servicios .servicios__title p { color: #a0aec0; }
  .servicios__item { background: #2d3748; }
  .servicios__item h3 { color: #f7fafc; }
  .servicios__item p { color: #a0aec0; }
  .bloque__popular { background: #1a202c; }
  .popular__title h2 { color: #f7fafc; }
  .popular__title p { color: #a0aec0; }
  .bloque__testimonio { background: #1a202c; }
  .testimonio__title h2 { color: #f7fafc; }
}