/* ═══════════════════════════════════════════════════
   BLINQ — Mantenimiento web (/mantenimiento-web)
   Estilos propios de la página. Los componentes base (secciones, columnas,
   filas, FAQ) vienen de ui.css.

   El visual del hero es un OBJETO DE DEMO: el panel de estado de un sitio
   con acompañamiento mensual. Va en claro y fijo (no cambia con el tema),
   como .rx-win y .chat-demo. Escala con unidades de contenedor (cqw).
   ═══════════════════════════════════════════════════ */

/* ─────────────────────────────────────
   HERO · escenario
   ───────────────────────────────────── */
.mt { container-type: inline-size; }

.mt-stage {
    position: relative;
    padding: 5cqw 5cqw 16cqw;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--bg-2);
    font-size: clamp(8px, 2.4cqw, 13.5px);
    line-height: 1.3;
}

.mt-panel {
    overflow: hidden;
    border-radius: 2cqw;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(16, 14, 24, 0.08), var(--shadow-media);
    font-family: var(--font-body);
}

.mt-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    padding: 2.6cqw 3.2cqw;
    border-bottom: 1px solid #ECEBF1;
}

.mt-panel__site {
    display: inline-flex;
    align-items: center;
    gap: 1.4cqw;
    font: 500 0.95em var(--font-mono);
}

.mt-dot {
    width: 1.6cqw;
    height: 1.6cqw;
    border-radius: 50%;
    background: #16A34A;
    box-shadow: 0 0 0 0.8cqw rgba(22, 163, 74, 0.15);
}

.mt-panel__tag {
    padding: 0.6cqw 1.6cqw;
    border-radius: 4px;
    background: #EAF7EE;
    color: #15803D;
    font-weight: 600;
    font-size: 0.85em;
}

.mt-checks {
    display: grid;
    margin: 0;
    padding: 0 3.2cqw;
    list-style: none;
}

.mt-checks li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2.2cqw;
    padding: 2.2cqw 0;
    border-bottom: 1px solid #F0EFF4;
}

.mt-checks .i {
    width: 5.6cqw;
    height: 5.6cqw;
    padding: 1.3cqw;
    border-radius: 1.4cqw;
    background: #F4EEFC;
    color: #7A00C7;
}

.mt-checks span { display: grid; gap: 0.3cqw; color: #6B6878; font-size: 0.88em; }
.mt-checks b { color: #16141D; font-weight: 600; font-size: 1.12em; }

.mt-checks em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.85em;
    color: #15803D;
}

.mt-tasks { padding: 2.6cqw 3.2cqw 3.2cqw; background: #FAFAFC; }

.mt-tasks__k {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1.6cqw;
    font: 500 0.82em var(--font-mono);
    letter-spacing: 0.02em;
    color: #6B6878;
}

.mt-tasks__k span { color: #7A00C7; }

.mt-tasks ul { display: grid; gap: 1.2cqw; margin: 0; padding: 0; list-style: none; }

.mt-tasks li {
    display: flex;
    align-items: center;
    gap: 1.6cqw;
    color: #6B6878;
}

.mt-tasks li .i { flex: none; width: 1.15em; height: 1.15em; color: #B5B2C2; }
.mt-tasks li.is-done { color: #16141D; }
.mt-tasks li.is-done .i { color: #15803D; }

/* Tarjeta flotante: reporte del mes (objeto de demo) */
.mt-report {
    position: absolute;
    right: 3cqw;
    bottom: 3cqw;
    z-index: 2;
    display: grid;
    gap: 1.4cqw;
    width: 40cqw;
    padding: 2.4cqw 2.8cqw;
    border-radius: 2cqw;
    background: #FFFFFF;
    color: #16141D;
    box-shadow: 0 0 0 1px rgba(157, 0, 255, 0.35), 0 26px 48px -24px rgba(14, 11, 23, 0.55);
    font-family: var(--font-body);
}

.mt-report__k {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    font-weight: 600;
}

.mt-report__k .i { color: #7A00C7; }

.mt-report__bars {
    display: flex;
    align-items: flex-end;
    gap: 1.2cqw;
    height: 9cqw;
    padding-bottom: 0.4cqw;
    border-bottom: 1px solid #ECEBF1;
}

.mt-report__bars i {
    flex: 1;
    height: var(--h);
    border-radius: 2px 2px 0 0;
    background: #E4D2F7;
}

.mt-report__bars i:last-child { background: #9D00FF; }

.mt-report__t { color: #6B6878; font-size: 0.85em; }

/* Movimiento: los chequeos aparecen en orden y el reporte llega al final */
@media (prefers-reduced-motion: no-preference) {
    .js .mt-checks li { animation: mt-in 0.45s ease var(--d, 0s) both; }
    .js .mt-report { animation: mt-in 0.5s ease 1.4s both; }
}

@keyframes mt-in { from { opacity: 0; transform: translateY(6px); } }


/* ─────────────────────────────────────
   03 · Qué cubre
   ───────────────────────────────────── */
.mt-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
    overflow: hidden;
}

.mt-pair__col { padding: clamp(22px, 2.6vw, 32px); }
.mt-pair__col + .mt-pair__col { border-left: 1px solid var(--line); }

.mt-pair__k {
    margin: 0 0 16px;
    font: 500 0.8125rem var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.mt-pair__col--in .mt-pair__k { color: var(--link); }

.mt-pair ul { display: grid; margin: 0; padding: 0; list-style: none; }

.mt-pair li {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    line-height: 1.5;
    color: var(--text-2);
}

.mt-pair li:first-child { border-top: 0; padding-top: 0; }
.mt-pair li b { display: block; color: var(--text); font-weight: 600; }
.mt-pair li .i { flex: none; margin-top: 0.22em; color: var(--text-3); }
.mt-pair__col--in li .i { color: var(--link); }

/* 04 · Software: la tarjeta de la licencia */
#software .pair__col {
    display: grid;
    gap: 16px;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-2);
}

@media (max-width: 767px) {
    .mt-pair { grid-template-columns: minmax(0, 1fr); }
    .mt-pair__col + .mt-pair__col { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 599px) {
    .mt-stage { padding: 4cqw 3cqw 22cqw; }
    .mt-report { width: 52cqw; }
}