/* ClickPromo · landing-stepper.css
   Barra de progreso fina y "sticky" anclada arriba mientras se hace scroll.
   Para revertir: borrar este archivo y la línea que lo carga en index.php. */

/* Compensar la barra fija para que no tape el logo */
body { padding-top: 32px; }

.cp-progress-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: 32px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    margin: 0;
    /* GPU layer: evita que Android Chrome la oculte al abrir el teclado */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
}

.cp-progress-sticky .cp-progress-bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
    position: relative;
}

.cp-progress-sticky .cp-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #fbbf24, #f97316, #ef4444);
    background-size: 200% 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28),
                background 0.4s ease;
    animation: cp-stk-shimmer 3s linear infinite;
}
@keyframes cp-stk-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: -200% 50%; }
}

.cp-progress-sticky .cp-progress-pct {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    line-height: 1;
    min-width: 44px;
    text-align: right;
    white-space: nowrap;
}
.cp-progress-sticky .cp-progress-pct strong {
    color: #f97316;
    font-weight: 800;
    font-size: 17px;
}

/* Cuando llega al 100%, la barra y el número se ponen verdes */
.cp-progress-sticky.completo .cp-progress-fill {
    background: linear-gradient(90deg, #10b981, #059669);
    animation: none;
}
.cp-progress-sticky.completo .cp-progress-pct strong {
    color: #10b981;
}

@media (prefers-reduced-motion: reduce) {
    .cp-progress-sticky .cp-progress-fill { animation: none; transition: none; }
}