/**
 * ========================================
 * STICKY BAR - Call to Action Flotante
 * ========================================
 *
 * Barra de CTA flotante que aparece al hacer scroll
 * Incluye botones para solicitar demo y contactar por WhatsApp
 *
 * UBICACIÓN: Bottom fixed en todas las páginas
 * Z-INDEX: 999 (debajo del navbar pero sobre el contenido)
 *
 * Última modificación: 2025-10-24
 * Extraído de: index.php (líneas 1482-1616)
 * ========================================
 */

/* Contenedor principal del sticky bar */
.cta-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    color: #196bab;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    padding: 15px 0;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 3px solid #196bab;
}

/* Estado visible (se activa con JavaScript al hacer scroll) */
.cta-sticky-bar.visible {
    transform: translateY(0);
}

/* Contenedor interno con max-width */
.cta-sticky-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Sección de texto e icono */
.cta-sticky-text {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Icono circular animado */
.cta-sticky-text .icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #196bab 0%, #2a9fd6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    border: 2px solid #196bab;
}

/* Título del sticky bar */
.cta-sticky-text h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #196bab;
    font-weight: 600;
}

/* Subtítulo del sticky bar */
.cta-sticky-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
}

/* Contenedor de botones */
.cta-sticky-buttons {
    display: flex;
    gap: 15px;
}

/* Botón base del sticky bar */
.btn-sticky {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
}

/* Botón primario (Solicitar Demo) */
.btn-sticky-primary {
    background: linear-gradient(135deg, #196bab 0%, #2a9fd6 100%);
    color: white;
    border: 2px solid #196bab;
}

.btn-sticky-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(25, 107, 171, 0.4);
    color: white;
    text-decoration: none;
    background: linear-gradient(135deg, #2a9fd6 0%, #196bab 100%);
}

/* Botón secundario (WhatsApp) - Color oscurecido para WCAG AA */
.btn-sticky-secondary {
    background: #128C7E; /* WhatsApp verde oscuro oficial (mejor contraste) */
    color: white;
    border: 2px solid #128C7E;
    /* Color original: #25D366 (contraste 3.1:1 - insuficiente) */
    /* Nuevo color: #128C7E (contraste 4.54:1 - cumple WCAG AA) */
}

.btn-sticky-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(18, 140, 126, 0.4);
    color: white;
    text-decoration: none;
    background: #0D6658; /* Aún más oscuro en hover */
}

/* ========================================
   RESPONSIVE - Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Layout vertical en móvil */
    .cta-sticky-content {
        flex-direction: column;
        gap: 15px;
    }

    /* Ocultar el icono en mobile para ahorrar espacio */
    .cta-sticky-text .icon {
        display: none;
    }

    /* Ocultar subtítulo en mobile */
    .cta-sticky-text .text p {
        display: none;
    }

    /* Botones en ancho completo */
    .cta-sticky-buttons {
        width: 100%;
    }

    .btn-sticky {
        flex: 1;
        justify-content: center;
        font-size: 0.85rem;
        padding: 10px 20px;
    }
}

/* ========================================
   ACCESIBILIDAD
   ======================================== */

/* Focus visible para teclado */
.btn-sticky:focus {
    outline: 2px solid #196bab;
    outline-offset: 2px;
}

/* Reducir animaciones para usuarios con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .cta-sticky-bar {
        transition: none;
    }

    .btn-sticky {
        transition: none;
    }

    .btn-sticky:hover {
        transform: none;
    }
}