/* Fase 6 · Cómo reservar · Tipografía y colores comunes de la Home. */
.inp-home-como-funciona {
    padding: 82px 0 88px;
    background: #fff;
    font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif);
}

.inp-home-como-funciona__header {
    max-width: 1120px;
    margin: 0 auto 28px;
    text-align: center;
}

.inp-home-como-funciona__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--inp-home-accent-color, #acbd51);
    font-size: var(--inp-home-eyebrow-size, 13px);
    line-height: 1.3;
    font-weight: var(--inp-home-heading-weight, 800);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.inp-home-como-funciona__header h2 {
    margin: 0 0 16px;
    font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif);
    color: var(--inp-home-heading-color, #171917);
    font-size: var(--inp-home-heading-size, clamp(32px, 3.6vw, 48px));
    line-height: var(--inp-home-heading-line-height, 1.12);
    letter-spacing: var(--inp-home-heading-letter-spacing, -.035em);
    font-weight: var(--inp-home-heading-weight, 800);
}

.inp-home-como-funciona__header p {
    max-width: 680px;
    margin: 0 auto;
    font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif);
    color: var(--inp-home-body-color, #454a45);
    font-size: var(--inp-home-body-size, 16px);
    font-weight: var(--inp-home-body-weight, 400);
    line-height: var(--inp-home-body-line-height, 1.7);
}

.inp-home-como-funciona__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 18px;
}

.inp-home-como-funciona__steps::before {
    content: "";
    position: absolute;
    top: 57px;
    left: 16.666%;
    right: 16.666%;
    height: 1px;
    background: #dfe5d4;
    z-index: 0;
}

.inp-home-como-funciona__step {
    position: relative;
    z-index: 1;
    padding: 0 28px;
    text-align: center;
}

.inp-home-como-funciona__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 28px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--inp-home-accent-color, #acbd51);
    font-size: var(--inp-home-eyebrow-size, 13px);
    font-weight: var(--inp-home-heading-weight, 800);
    letter-spacing: .05em;
}

.inp-home-como-funciona__icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce4c6;
    border-radius: 50%;
    background: #f5f7f2;
    color: var(--inp-home-accent-color, #acbd51);
    box-shadow: 0 8px 24px rgba(20, 28, 18, .06);
}

.inp-home-como-funciona__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inp-home-como-funciona__step h3 {
    margin: 0 0 10px;
    font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif);
    color: var(--inp-home-heading-color, #171917);
    font-size: 20px;
    line-height: 1.3;
    font-weight: var(--inp-home-heading-weight, 800);
}

.inp-home-como-funciona__step p {
    max-width: 350px;
    margin: 0 auto;
    font-family: var(--inp-home-font-family, 'Poppins', Arial, sans-serif);
    color: var(--inp-home-body-color, #454a45);
    font-size: var(--inp-home-body-size, 16px);
    font-weight: var(--inp-home-body-weight, 400);
    line-height: var(--inp-home-body-line-height, 1.7);
}

@media (max-width: 980px) {
    .inp-home-como-funciona__header {
        max-width: 860px;
    }

    .inp-home-como-funciona__header h2 {
        font-size: var(--inp-home-heading-size, clamp(32px, 3.6vw, 48px));
    }
}

@media (max-width: 820px) {
    .inp-home-como-funciona {
        padding: 68px 0 72px;
    }

    .inp-home-como-funciona__header {
        margin-bottom: 34px;
    }

    .inp-home-como-funciona__steps {
        grid-template-columns: 1fr;
        gap: 38px;
        margin-top: 0;
    }

    .inp-home-como-funciona__steps::before {
        display: none;
    }

    .inp-home-como-funciona__step {
        max-width: 560px;
        margin: 0 auto;
        padding: 0;
    }
}

@media (max-width: 620px) {
    .inp-home-como-funciona {
        padding: 58px 0 62px;
    }

    .inp-home-como-funciona__header {
        margin-bottom: 32px;
    }

    .inp-home-como-funciona__header h2 {
        font-size: var(--inp-home-heading-size, clamp(32px, 3.6vw, 48px));
    }

    .inp-home-como-funciona__header p {
        font-size: var(--inp-home-body-size, 16px);
    }

    .inp-home-como-funciona__step h3 {
        font-size: 20px;
    }

    .inp-home-como-funciona__step p {
        font-size: var(--inp-home-body-size, 16px);
    }
}