/* ============================================================
   TecnoTip — Revendedores (depende de landing.css)
   ============================================================ */

.rv-card {
    height: 100%; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 18px;
    padding: 2rem 1.6rem; transition: transform .3s, border-color .3s, background .3s;
}
.rv-card:hover { transform: translateY(-8px); border-color: rgba(255,107,0,0.5); background: rgba(255,107,0,0.05); }
.rv-card .ic {
    width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,107,0,0.05));
    color: var(--tt-orange); font-size: 1.4rem; margin-bottom: 1.2rem;
}
.rv-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.rv-card p { color: var(--tt-muted); font-size: .92rem; margin: 0; }

/* ---------- Como funciona (steps) ---------- */
.rv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; max-width: 1100px; margin: 0 auto; }
.rv-step {
    text-align: center; padding: 2rem 1.4rem; background: var(--tt-card); border: 1px solid var(--tt-border);
    border-radius: 18px; position: relative; transition: transform .3s, border-color .3s;
}
.rv-step:hover { transform: translateY(-6px); border-color: rgba(255,107,0,0.4); }
.rv-step .n {
    width: 42px; height: 42px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(100deg, var(--tt-orange), var(--tt-orange-2)); color: #100a04;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem;
}
.rv-step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.rv-step p { color: var(--tt-muted); font-size: .88rem; margin: 0; }

@media (max-width: 991.98px) {
    .rv-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .rv-steps { grid-template-columns: 1fr; }
}

/* ---------- Portfólio mini ---------- */
.rv-mini {
    display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center;
    padding: 1.4rem .8rem; background: var(--tt-card); border: 1px solid var(--tt-border); border-radius: 16px;
    transition: transform .3s, border-color .3s; height: 100%;
}
.rv-mini:hover { transform: translateY(-6px); border-color: rgba(255,107,0,0.4); }
.rv-mini i { font-size: 1.5rem; color: var(--tt-orange); }
.rv-mini span { font-size: .82rem; font-weight: 600; color: var(--tt-text); }