/* =========================================
   ProcessNetifly · Proceso Section Styles
   Prefijo: pn- para evitar conflictos WP
   ========================================= */

.pn-section {
    padding: 64px 48px;
    border-bottom: 1px solid var(--line);
    background: var(--bg2);
    box-sizing: border-box;

    
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---- HEADER ---- */
.pn-header {
    margin-bottom: 0;
}

.pn-label {
    font-family: var(--mont);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pn-label::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--blue);
    flex-shrink: 0;
}

.pn-title {
    font-family: var(--mont);
    font-size: clamp(20px, 2.5vw, 34px);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.3px;
    color: var(--text);
    margin: 8px 0 0;
}

.pn-title span {
    color: var(--blue);
}

/* ---- LINE ---- */
.pn-line {
    display: grid;
    margin-top: 40px;
    position: relative;
}

/* Línea horizontal conectora */
.pn-line::before {
    content: '';
    position: absolute;
    top: 19px;
    left: calc(100% / (var(--pn-cols) * 2));
    right: calc(100% / (var(--pn-cols) * 2));
    height: 1px;
    background: var(--lineb);
    z-index: 0;
}

/* Columnas dinámicas */
.pn-cols-1  { grid-template-columns: repeat(1, 1fr);  --pn-cols: 1; }
.pn-cols-2  { grid-template-columns: repeat(2, 1fr);  --pn-cols: 2; }
.pn-cols-3  { grid-template-columns: repeat(3, 1fr);  --pn-cols: 3; }
.pn-cols-4  { grid-template-columns: repeat(4, 1fr);  --pn-cols: 4; }
.pn-cols-5  { grid-template-columns: repeat(5, 1fr);  --pn-cols: 5; }
.pn-cols-6  { grid-template-columns: repeat(6, 1fr);  --pn-cols: 6; }

/* ---- PASO ---- */
.pn-paso {
    text-align: center;
    position: relative;
    z-index: 1;
}

.pn-dot {
    width: 38px;
    height: 38px;
    border: 1.5px solid var(--blue);
    background: var(--bg2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mont);
    font-size: 11px;
    font-weight: 800;
    color: var(--blue);
    margin: 0 auto 14px;
}

.pn-paso-title {
    font-family: var(--mont);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    margin-bottom: 5px;
    line-height: 1.3;
    padding: 0 4px;
}

.pn-paso-body {
    font-family: var(--mont);
    font-size: 10px;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.5;
    padding: 0 4px;
    margin: 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 991px) {
    .pn-section {
        padding: 40px 24px;
    }

    .pn-cols-5,
    .pn-cols-6 {
        grid-template-columns: repeat(3, 1fr);
        --pn-cols: 3;
    }

    .pn-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        --pn-cols: 2;
    }

    /* Ocultar línea conectora en tablet/móvil */
    .pn-line::before {
        display: none;
    }

    .pn-paso {
        padding: 12px 0;
    }
}

@media (max-width: 600px) {
    .pn-cols-3,
    .pn-cols-4,
    .pn-cols-5,
    .pn-cols-6 {
        grid-template-columns: repeat(2, 1fr);
        --pn-cols: 2;
    }

    .pn-paso {
        border-bottom: 1px solid var(--line);
        padding-bottom: 16px;
        margin-bottom: 8px;
    }

    .pn-paso:last-child {
        border-bottom: none;
    }
}