/* =========================================================
   Sistema (sistema.html): los sistemas y los 5 pasos
   ========================================================= */

/* ---------- Sistemas ---------- */
.sistemas { display: flex; flex-direction: column; gap: 32px; }
.sistema {
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px;
    overflow: hidden;
}
.sistema__imagen {
    background: var(--blanco);
    display: grid; place-items: center;
    padding: 24px;
}
.sistema__imagen img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.sistema__texto { padding: 44px 44px; display: flex; flex-direction: column; gap: 16px; }
.sistema__tipo { color: var(--naranja); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.sistema__texto h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.sistema__texto > p { color: var(--texto-suave); font-size: 1.08rem; }
.sistema__texto .lista-check { margin: 4px 0 8px; }
.sistema__texto .boton { align-self: flex-start; }

@media (max-width: 960px) {
    .sistema { grid-template-columns: 1fr; }
    .sistema__imagen img { max-height: 300px; }
}

@media (max-width: 560px) {
    .sistema__texto { padding: 28px 22px; }
    .sistema__texto .boton { align-self: stretch; }
}

/* ---------- Los 5 pasos ---------- */

.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; }
.pasos::before {
    content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, var(--naranja), rgba(255, 180, 35, 0.15));
}
.paso { position: relative; display: flex; flex-direction: column; gap: 16px; }
.paso__numero {
    position: relative; z-index: 1;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--naranja); color: var(--negro);
    font-weight: 800; font-size: 1.3rem;
    clip-path: var(--hexagono);
}
.paso .h3 { margin-bottom: 6px; font-size: 1.2rem; }
.paso p { color: var(--texto-suave); font-size: 0.98rem; }

@media (max-width: 1080px) {
    .pasos { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
    .pasos::before { display: none; }
}

@media (max-width: 720px) {
    .pasos { grid-template-columns: 1fr; gap: 0; }
    .paso { flex-direction: row; gap: 18px; padding-bottom: 28px; }
    .paso:not(:last-child)::before {
        content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px;
        background: rgba(255, 180, 35, 0.3);
    }
    .paso__numero { flex: none; }
}