/* =======================================================
 * CUSTOM CSS PARA MICROFIMEX
 * Versión: 17.0 (Limpio y Verificado)
 * ======================================================= */

/* ------ 1. Estilos Base y Tipografía ------ */
body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  color: #1f2937;
  background-color: #f9fafb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
}

/* ------ 2. Tema Oscuro ------ */
html.dark body {
  background-color: #0c111a;
  color: #adb5bd;
}

/* ------ 3. Componentes Específicos ------ */

/* Menú de Navegación */
.link-menu { 
  position: relative; 
  padding-bottom: 0.25rem; 
  transition: color 0.3s ease;
}
.link-menu::after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  height: 3px; 
  background: linear-gradient(to right, #059669, #84cc16); 
  transform: scaleX(0); 
  transform-origin: center; 
  transition: transform 0.4s ease; 
}
.link-menu:hover::after { 
  transform: scaleX(1); 
}

/* Menú Móvil */
#mobile-menu { 
  transition: transform 0.3s ease-out, opacity 0.3s ease-out; 
}
#mobile-menu.hidden {
    transform: translateY(-100%);
    opacity: 0;
}
.item-mobile { 
  display: block; 
  padding: 0.75rem 1rem; 
  text-align: center; 
  width: 100%; 
  transition: background-color 0.2s ease-in-out;
}
.item-mobile:hover {
  background-color: #f3f4f6;
}
html.dark .item-mobile:hover {
  background-color: #374151;
}

/* Sección Hero */
.text-shadow-lg { 
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); 
}

/* Testimonios */
.testimonial-card {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
html.dark .testimonial-card {
    background-color: #1f2937;
    border: 1px solid #374151;
}

/* Modales Genéricos y de Chat */
.modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, 0.9); z-index: 1000; opacity: 0; visibility: hidden; backdrop-filter: blur(4px); transition: opacity 0.4s ease, visibility 0.4s ease; }
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content, .modal-content-chat { position: relative; background-color: #ffffff; padding: 2rem; border-radius: 1.5rem; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); transform: translateY(-50px) scale(0.95); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; }
.modal-content { max-width: 500px; }
.modal-content-chat { max-width: 600px; height: 80vh; max-height: 700px; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
html.dark .modal-content, html.dark .modal-content-chat { background-color: #1f2937; }
.modal-overlay.visible .modal-content, .modal-overlay.visible .modal-content-chat { transform: translateY(0) scale(1); opacity: 1; }
.close-button { position: absolute; top: 1rem; right: 1.5rem; background: none; border: none; font-size: 2.5rem; line-height: 1; color: #9ca3af; cursor: pointer; z-index: 10; transition: color 0.3s, transform 0.3s; }
.close-button:hover { color: #ef4444; transform: rotate(90deg); }
.modal-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 700; color: white; transition: transform 0.2s ease, box-shadow 0.3s ease; }
.modal-button:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.modal-content-chat .text-center { padding: 1rem; border-bottom: 1px solid #e5e7eb; }
html.dark .modal-content-chat .text-center { border-color: #374151; }
.chat-window { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.chat-message-wrapper { display: flex; max-width: 85%; flex-shrink: 0; }
.chat-bubble { padding: 0.75rem 1rem; border-radius: 1rem; line-height: 1.5; word-wrap: break-word; }
.model-message { align-self: flex-start; }
.model-message .chat-bubble { background-color: #e5e7eb; color: #1f2937; border-bottom-left-radius: 0.25rem; }
html.dark .model-message .chat-bubble { background-color: #374151; color: #f3f4f6; }
.user-message { align-self: flex-end; }
.user-message .chat-bubble { background-color: #10b981; color: white; border-bottom-right-radius: 0.25rem; }
.input-area-chat { display: flex; padding: 1rem; border-top: 1px solid #e5e7eb; background-color: #fff; }
html.dark .input-area-chat { border-top-color: #374151; background-color: #1f2937; }
.input-chat { flex-grow: 1; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.75rem 1rem; resize: none; background: #f9fafb; line-height: 1.5; max-height: 120px; overflow-y: auto; }
html.dark .input-chat { background-color: #4b5563; border-color: #6b7280; color: white; }
.send-button-chat { background-color: #10b981; color: white; border-radius: 0.5rem; padding: 0.5rem; margin-left: 0.5rem; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s; }
.send-button-chat:hover { background-color: #059669; }
.contact-area-chat { padding: 1.5rem; text-align: center; border-top: 1px solid #e5e7eb; background-color: #f9fafb; }
html.dark .contact-area-chat { border-top-color: #374151; background-color: #111827; }
.response-area-chat { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 5; }
.loading-spinner { border: 5px solid #374151; border-top-color: #10b981; border-radius: 50%; width: 40px; height: 40px; margin: 1rem auto; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }