@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


/*#cookie-consent-banner {
    /* Puedes añadir transiciones si usas JS para añadir/quitar una clase 'visible' en lugar de cambiar 'display' */
    /* transition: transform 0.3s ease-out, opacity 0.3s ease-out; */
    /* opacity: 0; */
    /* transform: translateY(100%); */
 /*}

#cookie-consent-banner.visible {
    /* opacity: 1; */
    /* transform: translateY(0); */
  /*   display: block; /* O flex, grid, etc., según tu diseño interno */
 /*}


/* --- START: Reset/Normalization Básico y Globales --- */
*,
*::before,
*::after {
    box-sizing: border-box; /* ¡IMPORTANTE! Incluye padding y borde en el ancho/alto total */
    margin: 0; /* Quitar márgenes por defecto */
    padding: 0; /* Quitar paddings por defecto */
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased; /* Mejor renderizado de fuentes en Webkit */
    -moz-osx-font-smoothing: grayscale; /* Mejor renderizado de fuentes en Firefox */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #fafafa;
    color: #1a1a1a;
    overflow-x: hidden; /* Mantenemos esto para ocultar la barra si algo se escapa */
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: break-word; /* Ayuda a prevenir desbordamiento por texto largo */
    word-wrap: break-word; /* Equivalente para navegadores más antiguos */
}

main {
    flex: 1; /* Empuja el footer hacia abajo */
}

body.dark {
    background-color: #0f172a;
    color: #f8fafc;
}
/* --- END: Reset/Normalization Básico y Globales --- */


/* --- Mejoras generales de Responsividad --- */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #cookie-consent-banner button {
        width: auto; /* O un max-width si prefieres */
        min-width: 120px; /* Ejemplo de ancho mínimo */
    }
    
    #chat-window.open {
        /* Posición y tamaño para ocupar toda la pantalla */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: none; /* Quitar límite de ancho */
        max-height: none; /* Quitar límite de alto */
        border-radius: 0; /* Quitar bordes redondeados */
        z-index: 1100; /* Asegurar que esté por encima de todo (incluso el nav) */
        /* Resetear transformaciones si es necesario */
        transform: none !important;
        transition: opacity 0.3s ease, visibility 0s linear 0s; /* Ajustar transición si se quita transform */
    }

    /* Opcional: Ocultar el scroll del body cuando el chat esté fullscreen */
    body.chat-open-fullscreen {
        overflow: hidden;
    }
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block; /* Previene espacio extra debajo */
    vertical-align: middle; /* Mejor alineación si están inline */
}

/* Tipografía base - Encabezados */
h1, .h1-style { font-size: 2.75rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
h2, .h2-style { font-size: 2rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.75rem; }
h3, .h3-style { font-size: 1.5rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.5rem; }
h4, .h4-style { font-size: 1.125rem; font-weight: 500; line-height: 1.5; margin-bottom: 0.25rem; }
p { margin-bottom: 1rem; }
a { color: #4f46e5; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #3730a3; text-decoration: underline; }
.dark a { color: #818cf8; }
.dark a:hover { color: #c7d2fe; }
/* --- Fin Mejoras generales --- */


/* --- Estilos de Componentes y Secciones --- */
.gradient-text {
    background: linear-gradient(90deg, #4f46e5, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dark .gradient-text {
     background: linear-gradient(90deg, #6366f1, #a78bfa);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
}

.hero-gradient {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    padding-top: 6rem; /* Padding base escritorio */
    padding-bottom: 6rem;
}
.dark .hero-gradient {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Padding de secciones generales */
.section-padding {
    padding-top: 4rem; /* 64px */
    padding-bottom: 4rem; /* 64px */
}

.card-hover {
    transition: all 0.3s ease;
    border-radius: 0.75rem; /* Consistent rounding */
    overflow: hidden; /* Ensure content respects border radius */
}
.card-hover: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);
}
.dark .card-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Animaciones */
.glow { animation: glow 2s infinite alternate; }
@keyframes glow { from { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); } to { box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); } }
.dark .glow { animation: glow-dark 2s infinite alternate; }
@keyframes glow-dark { from { box-shadow: 0 0 8px rgba(99, 102, 241, 0.6); } to { box-shadow: 0 0 25px rgba(129, 140, 248, 0.9); } }
.floating { animation: floating 6s ease-in-out infinite; }
@keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }
.typewriter { overflow: hidden; border-right: 2px solid #4f46e5; white-space: nowrap; animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; }
.dark .typewriter { border-right-color: #818cf8; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: #4f46e5; } }
.dark @keyframes blink-caret { 50% { border-color: #818cf8; } }

.grid-pattern { background-image: linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 40px 40px; }
.dark .grid-pattern { background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); }

/* Botón WhatsApp General */
.whatsapp-button { background-color: #25D366; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; color: white !important; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.whatsapp-button:hover { background-color: #128C7E; transform: scale(1.03); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.whatsapp-button i { font-size: 1.2rem; margin-right: 0.5rem; }

/* Botón genérico (ejemplo) */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background-color: #4f46e5; color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.btn-primary:hover { background-color: #4338ca; }
.dark .btn-primary { background-color: #6366f1; }
.dark .btn-primary:hover { background-color: #818cf8; }

/* Mobile menu styles */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-menu.open { max-height: 500px; /* Adjust as needed */ }

/* --- Dark Mode --- */
.toggle-checkbox:checked { right: 0; border-color: #6366f1; }
.toggle-checkbox:checked + .toggle-label { background-color: #6366f1; }
/* Dark mode specific styles */
.dark .bg-white { background-color: #1e293b; }
.dark .bg-gray-50 { background-color: #0f172a; }
.dark .bg-slate-100 { background-color: #1e293b; }
.dark .bg-dark-700 { background-color: #1e293b; }
.dark .text-gray-900 { color: #f8fafc; }
.dark .text-gray-700 { color: #cbd5e1; }
.dark .text-gray-600 { color: #94a3b8; }
.dark .text-gray-500 { color: #64748b; }
.dark .text-gray-400 { color: #94a3b8; }
.dark .text-gray-300 { color: #cbd5e1; }
.dark .text-gray-100 { color: #f1f5f9; }
.dark .border-gray-100 { border-color: #334155; }
.dark .border-gray-300 { border-color: #475569; }
.dark .border-gray-600 { border-color: #475569; }
.dark .border-gray-700 { border-color: #334155; }
.dark .border-gray-800 { border-color: #1e293b; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); }
.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2); }
.dark .bg-indigo-50 { background-color: rgba(67, 56, 202, 0.15); }
.dark .bg-indigo-900\/30 { background-color: rgba(49, 46, 129, 0.3); }
.dark .bg-blue-50 { background-color: rgba(30, 64, 175, 0.15); }
.dark .bg-blue-900\/30 { background-color: rgba(30, 58, 138, 0.3); }
.dark .bg-purple-50 { background-color: rgba(91, 33, 182, 0.15); }
.dark .bg-purple-900\/30 { background-color: rgba(91, 33, 182, 0.3); }
.dark .bg-gray-900 { background-color: #020617; }
.dark .logo-dark { color: #f8fafc; }

/* --- CHAT STYLES START --- */
.chat-widget-button { position: fixed; bottom: 2rem; right: 2rem; background-color: #4f46e5; color: white; width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); cursor: pointer; transition: all 0.3s ease; z-index: 1000; }
.chat-widget-button:hover { background-color: #4338ca; transform: scale(1.1); }
.dark .chat-widget-button { background-color: #6366f1; }
.dark .chat-widget-button:hover { background-color: #818cf8; }
.chat-window { position: fixed; bottom: 6.5rem; right: 2rem; width: 90%; max-width: 400px; height: 70vh; max-height: 600px; background-color: #ffffff; border-radius: 0.75rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); overflow: hidden; display: flex; flex-direction: column; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; border: 1px solid #e5e7eb; }
.chat-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s; }
.dark .chat-window { background-color: #1e293b; border-color: #334155; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); }
.chat-header { background-color: #f9fafb; color: #111827; padding: 1rem; display: flex; align-items: center; border-bottom: 1px solid #e5e7eb; position: relative; z-index: 10; flex-shrink: 0; }
.dark .chat-header { background-color: #0f172a; color: #f8fafc; border-bottom-color: #334155; }
.chat-messages { flex: 1; padding: 1.25rem; overflow-y: auto; background-color: #ffffff; }
.dark .chat-messages { background-color: #1e293b; }
.chat-footer { padding: 1rem; background-color: #f9fafb; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
.dark .chat-footer { background-color: #0f172a; border-top-color: #334155; }
.chat-input-wrapper { display: flex; align-items: center; background-color: #ffffff; border-radius: 0.75rem; border: 1px solid #d1d5db; padding: 0.25rem; }
.dark .chat-input-wrapper { background-color: #1e293b; border-color: #4b5563; }
.chat-input-wrapper:focus-within { border-color: #4f46e5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3); }
.dark .chat-input-wrapper:focus-within { border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.4); }
.chat-input { flex: 1; border: none; background: transparent; color: #1f2937; border-radius: 0.5rem; padding: 0.5rem 0.75rem; outline: none; font-size: 0.875rem; }
.dark .chat-input { color: #f8fafc; }
.chat-input::placeholder { color: #9ca3af; }
.dark .chat-input::placeholder { color: #64748b; }
.chat-send-button { background-color: #4f46e5; color: white; font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); cursor: pointer; border: none; outline: none; }
.chat-send-button:hover:not(:disabled) { background-color: #4338ca; }
.chat-send-button:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4); }
.chat-send-button:disabled { opacity: 0.5; cursor: not-allowed; }
.dark .chat-send-button { background-color: #6366f1; }
.dark .chat-send-button:hover:not(:disabled) { background-color: #818cf8; }
.dark .chat-send-button:focus { box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.5); }
.chat-status { font-size: 0.75rem; color: #6b7280; text-align: center; padding-top: 0.5rem; height: 1.5rem; }
.dark .chat-status { color: #9ca3af; }
.message-wrapper { margin-bottom: 1rem; }
.message-wrapper:last-child { margin-bottom: 0; }
.message-bubble { padding: 0.75rem; border-radius: 0.75rem; max-width: 80%; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); font-size: 0.875rem; line-height: 1.4; word-wrap: break-word; }
.dark .message-bubble { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1); }
.message-bubble.user { background-color: #e0e7ff; color: #3730a3; border-bottom-right-radius: 0.25rem; margin-left: auto; }
.dark .message-bubble.user { background-color: #4f46e5; color: #eef2ff; }
.message-bubble.assistant { background-color: #f3f4f6; color: #1f2937; border-bottom-left-radius: 0.25rem; margin-right: auto; }
.dark .message-bubble.assistant { background-color: #374151; color: #f3f4f6; }
.message-time { font-size: 0.75rem; display: block; text-align: right; margin-top: 0.25rem; opacity: 0.75; }
.message-time.user { color: #4338ca; }
.dark .message-time.user { color: #c7d2fe; }
.message-time.assistant { color: #4b5563; text-align: left; }
.dark .message-time.assistant { color: #9ca3af; }
.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 10px; }
.chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; border: 2px solid #f3f4f6; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.dark .chat-messages::-webkit-scrollbar-track { background: #1f293b; }
.dark .chat-messages::-webkit-scrollbar-thumb { background: #4b5563; border-color: #1f293b; }
.dark .chat-messages::-webkit-scrollbar-thumb:hover { background: #6b7280; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.message-fade-in { animation: fadeIn 0.3s ease-out forwards; }
/* --- CHAT STYLES END --- */

/* --- BACK TO TOP BUTTON --- */
#back-to-top {
    position: fixed;
    bottom: 2rem; /* Ajusta si es necesario para desktop */
    right: 2rem; /* Ajusta si es necesario para desktop */
    background-color: #4f46e5; /* Color base */
    color: white;
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    border-radius: 9999px;
    display: none; /* Oculto por defecto, se muestra con JS */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    z-index: 998; /* Ligeramente debajo del chat */
    cursor: pointer;
}
#back-to-top:hover {
    background-color: #4338ca;
    transform: scale(1.05);
}
.dark #back-to-top {
    background-color: #6366f1;
}
.dark #back-to-top:hover {
    background-color: #818cf8;
}
#back-to-top.visible {
    display: flex; /* Mostrar cuando tenga la clase 'visible' */
}


/* --- START: Mobile responsive fixes (@media) --- */
@media (max-width: 768px) {

    /* --- Ajustes Generales para Móvil --- */
    body { font-size: 14px; line-height: 1.5; }
    h1, .h1-style { font-size: 1.875rem; } /* 30px */
    h2, .h2-style { font-size: 1.5rem; }   /* 24px */
    h3, .h3-style { font-size: 1.25rem; }  /* 20px */
    h4, .h4-style { font-size: 1rem; }     /* 16px */
    p { margin-bottom: 0.75rem; }
    .section-padding { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .btn, button:not(.chat-send-button):not(.chat-widget-button):not(#back-to-top) { padding: 0.6rem 1rem; font-size: 0.875rem; } /* Excluir #back-to-top de este padding */
    .whatsapp-button { padding: 0.6rem 1rem; font-size: 0.875rem; }
    .whatsapp-button i { font-size: 1rem; margin-right: 0.4rem; }
    input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="search"], textarea, select { font-size: 0.9rem; padding: 0.75rem 0.75rem; width: 100%; margin-bottom: 0.75rem; }

    /* --- INICIO: Ajustes para Hero Móvil (Más Pequeño) --- */
    .hero-gradient {
        min-height: auto;
        padding-top: 2.5rem !important; /* Reducido */
        padding-bottom: 1.5rem !important; /* Reducido */
        overflow: hidden;
    }
    .hero-content {
        grid-template-columns: 1fr;
        gap: 1.2rem !important; /* Reducido */
    }
    .hero-content .hero-text {
        /* Título principal - Más Reducido */
        font-size: 1.7rem !important; /* Reducido desde 1.9rem */
        line-height: 1.2 !important; /* Ajustado */
        font-weight: 700;
    }
    .hero-content .hero-subtext {
        /* Subtítulo - Más Reducido */
        font-size: 0.85rem !important; /* Reducido desde 0.9rem */
        margin-bottom: 0.8rem !important; /* Reducido */
        line-height: 1.45 !important; /* Ajustado */
    }
    .hero-content > div:first-child .flex.flex-col {
         align-items: stretch;
    }
    /* Botones DENTRO del hero - Más Pequeños */
    .hero-content a.whatsapp-button,
    .hero-content a:not(.whatsapp-button) {
        padding-top: 0.5rem !important; /* Reducido desde 0.55rem */
        padding-bottom: 0.5rem !important; /* Reducido desde 0.55rem */
        font-size: 0.8rem !important; /* Reducido desde 0.85rem */
        border-radius: 0.3rem; /* Ligeramente más pequeño */
        text-align: center;
        display: inline-block; /* O flex si se usa icono */
        font-weight: 500; /* Ligeramente menos bold */
    }
    .hero-content a.whatsapp-button i {
        font-size: 0.9rem !important; /* Reducido desde 1rem */
        margin-right: 0.3rem !important; /* Reducido */
        vertical-align: middle;
    }
    .hero-content > div:first-child .flex.flex-col.sm\:flex-row {
         flex-direction: column !important;
         gap: 0.6rem; /* Espacio entre botones Reducido */
    }

    /* Contenedor de código - Más Pequeño */
    .code-container {
        margin-top: 0.3rem; /* Reducido */
        max-width: 90%; /* Asegurar que sea más pequeño */
        margin-left: auto;
        margin-right: auto;
    }
    .code-container .absolute { display: none; }
    .code-container .relative.bg-white {
        padding: 0.3rem !important; /* Reducido desde 0.4rem */
        border-radius: 0.3rem !important; /* Más pequeño */
    }
    /* Texto del código - Más Pequeño */
    .code-container pre,
    .code-container .font-mono {
        font-size: 0.7rem !important; /* Reducido desde 0.75rem */
        padding: 0.6rem !important; /* Reducido */
        overflow-x: auto;
        line-height: 1.3 !important; /* Ajustado */
    }
    /* Elementos dentro de la ventana de código - Más Pequeños */
    .code-container .flex.items-center.mb-4 div[class*="rounded-full"] { width: 0.4rem; height: 0.4rem; margin-right: 0.15rem; } /* Reducido */
    .code-container .flex.items-center.mb-4 span { /* Nombre de archivo */
        font-size: 0.65rem !important; /* Reducido desde 0.7rem */
        margin-left: 0.25rem;
    }
    .code-container .flex.justify-between.items-center {
        flex-direction: row;
        align-items: center;
        gap: 0.4rem; /* Reducido */
        margin-top: 0.4rem !important; /* Reducido */
    }
    .code-container .text-xs.bg-indigo-100 { /* Etiqueta "IA en tiempo real" */
         padding: 0.1rem 0.3rem !important; /* Reducido */
         font-size: 0.6rem !important; /* Reducido desde 0.65rem */
    }
    .code-container .text-sm.text-gray-500 { /* Texto "Sistema activo" */
         font-size: 0.65rem !important; /* Reducido desde 0.7rem */
    }
    .code-container .text-sm.text-gray-500 span[class*="w-3"] { /* Icono de estado */
         width: 0.4rem !important; /* Reducido */
         height: 0.4rem !important; /* Reducido */
         margin-right: 0.2rem !important; /* Reducido */
     }
    /* --- FIN: Ajustes Hero Móvil --- */


    /* Contenedores Flex que deben envolver o apilar en móvil (Ejemplo Logos) */
    .logos-container { /* Reemplaza con tu clase real */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
    .logos-container > * {
        flex-shrink: 0;
        max-width: 120px; /* Ajusta según el tamaño deseado del logo */
    }

    /* Contenedores Grid que deben apilar en móvil */
    .testimonial-grid, .features-grid, .pricing-grid, .company-logos-grid /* Añade/Adapta tus clases */ {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .footer-grid > div { margin-left: auto; margin-right: auto; }

    /* Manejo de Tablas Anchas */
    .table-responsive-wrapper { /* Envuelve tu <table> con este div en HTML */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }
    .table-responsive-wrapper table {
        width: 100%;
        min-width: 600px; /* EJEMPLO: Ancho mínimo para evitar compresión excesiva */
        border-collapse: collapse;
    }

    /* --- INICIO: Rediseño Botones Flotantes Móvil --- */
    #back-to-top {
        bottom: 4.5rem;   /* Misma altura que el chat */
        right: 1rem;    /* Quitar posicionamiento derecho */
        left: auto;     /* Posicionar a la izquierda */
        width: 3rem;    /* Igualar tamaño al chat móvil */
        height: 3rem;   /* Igualar tamaño al chat móvil */
        z-index: 998;   /* Ligeramente debajo del chat por si acaso */
    }
    .chat-widget-button {
        bottom: 1rem;   /* Mantener en 1rem */
        right: 1rem;    /* Mantener en 1rem */
        width: 3rem;    /* Tamaño móvil consistente */
        height: 3rem;   /* Tamaño móvil consistente */
        z-index: 1000;  /* Asegurar que esté por encima */
    }
    /* Ajustar ventana de chat para que no colisione con botones (si se abre) */
    .chat-window {
        right: 1rem;
        /* Aumentar el bottom para que no esté encima de los botones fijos */
        bottom: 5rem; /* (1rem del botón + 3rem altura botón + 1rem espacio) */
        max-width: calc(100% - 2rem);
        height: calc(60vh - 4rem); /* Reducir altura un poco para compensar el bottom aumentado */
        max-height: 400px; /* Reducir max-height */
    }
    /* --- FIN: Rediseño Botones Flotantes Móvil --- */

    /* Chat responsive (Ajustes previos mantenidos, excepto ventana) */
    .chat-send-button span { display: none; }
    .chat-send-button svg { margin: 0; }
    .chat-send-button { padding: 0.5rem; }
    .chat-messages { padding: 0.75rem; }
    .message-bubble { max-width: 85%; font-size: 0.8rem; }

}
/* --- END: Mobile responsive fixes --- */


/* Estilos para sr-only (accesibilidad) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}