.pay-hero__grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.pay-lead { color: var(--ink-soft); font-size: var(--step-1); max-width: 46ch; margin: 0.75rem 0 1.75rem; }
.pay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pay-alt { font-weight: 600; color: var(--pino); text-decoration: none; }
.pay-alt:hover { color: var(--pino-ink); text-decoration: underline; } .pay-btn { font-size: var(--step-1); padding: 0.85em 1.5em; box-shadow: var(--shadow-sm); }
.pay-trust {
display: flex; align-items: center; gap: 0.55rem;
margin: 1.5rem 0 0; font-size: var(--step--1); color: var(--ink-soft); max-width: 48ch;
}
.pay-trust .icon { flex: none; color: var(--pino); } .pay-card {
background: var(--card);
border: 1px solid var(--hair);
border-radius: var(--radius);
padding: clamp(22px, 3vw, 32px);
box-shadow: var(--shadow-sm);
}
.pay-card__label {
display: inline-block; font-size: var(--step--1); font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.9rem;
}
.pay-methods {
list-style: none; margin: 0 0 1rem; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pay-methods li {
font-weight: 700; font-size: var(--step--1);
background: var(--plaster); border: 1px solid var(--hair);
color: var(--tinta); padding: 0.4em 0.8em; border-radius: var(--radius-pill);
}
.pay-card__note { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 1.25rem; } .pay-card .btn { width: 100%; justify-content: center; min-height: 44px; } .pay-steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px);
counter-reset: none;
}
.pay-step {
position: relative;
background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
padding: clamp(22px, 3vw, 30px); padding-top: 2.4rem;
box-shadow: var(--shadow-sm);
}
.pay-step__num {
position: absolute; top: -0.85rem; left: clamp(22px, 3vw, 30px);
width: 2.1rem; height: 2.1rem; border-radius: 50%;
background: var(--oxido); color: #fff; font-weight: 800; font-size: 0.95rem;
display: grid; place-items: center; box-shadow: var(--shadow-sm);
}
.pay-step__ico { display: inline-flex; color: var(--oxido); margin-bottom: 0.5rem; }
.pay-step h3 { font-size: var(--step-1); margin: 0 0 0.35rem; }
.pay-step p { margin: 0; color: var(--ink-soft); font-size: var(--step-0); } @media (max-width: 860px) {
.pay-hero__grid { grid-template-columns: 1fr; }
.pay-steps { grid-template-columns: 1fr; gap: 22px; }
}