/* Base de la plataforma. Todo sale de tokens.css (DESIGN.md): nada de colores ni radios a mano. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--t-bg); color: var(--t-ink); font-family: var(--t-font); font-size: var(--t-size-body); line-height: 1.45; }
h1, h2 { font-family: var(--t-font-display); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
a { color: var(--t-brand-ink); }
:focus-visible { outline: 2px solid var(--t-brand); outline-offset: 2px; }

.t-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--t-gutter); text-align: center; }
.t-center > main { width: 100%; max-width: 440px; }
.t-title { font-size: var(--t-size-title); line-height: 1.1; margin-bottom: 8px; }
.t-muted { color: var(--t-muted); margin: 0 0 24px; }

.t-soft { background: var(--t-soft); }
.t-card { background: var(--t-bg); border-radius: var(--t-r-card); padding: 20px; text-align: left; }
.t-field { margin: 0 0 14px; }
.t-field label { display: block; margin: 0 0 6px; font-size: var(--t-size-small); font-weight: 600; }
.t-field input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: var(--t-border); border-radius: var(--t-r-ctl); background: var(--t-bg); font: inherit; font-size: 16px; color: var(--t-ink); }
.t-field input:focus { outline: 2px solid var(--t-brand); outline-offset: -1px; border-color: transparent; }
.t-error { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--t-r-ctl); background: var(--t-danger-soft); color: var(--t-danger); font-size: 15px; font-weight: 600; }
.t-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--t-btn-h); padding: 0 20px; border: 0; border-radius: var(--t-r-pill); background: var(--t-brand); color: var(--t-bg); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.t-link { display: inline-flex; align-items: center; min-height: var(--t-touch); padding: 0 8px; border: 0; background: none; color: var(--t-muted); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.t-ok { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--t-r-ctl); background: var(--t-ok-soft); color: var(--t-ok); font-size: 15px; font-weight: 600; }
.t-help { margin: 6px 0 0; color: var(--t-muted); font-size: var(--t-size-small); }
.t-affix { display: flex; align-items: center; border: var(--t-border); border-radius: var(--t-r-ctl); background: var(--t-bg); overflow: hidden; }
.t-affix:focus-within { outline: 2px solid var(--t-brand); outline-offset: -1px; border-color: transparent; }
.t-field .t-affix input { flex: 1; min-width: 96px; border: 0; outline: 0; }
.t-affix span { max-width: 62%; padding: 0 14px 0 2px; color: var(--t-muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La portada de la plataforma (para el comerciante). */
.t-land main { max-width: 560px; margin: 0 auto; padding: 32px var(--t-gutter) 56px; }
.t-land h1 { font-size: 34px; line-height: 1.05; margin: 0 0 12px; }
.t-land h2 { font-size: 22px; line-height: 1.15; margin: 40px 0 12px; }
.t-land h3 { margin: 0 0 4px; font-family: var(--t-font); font-size: 16px; font-weight: 700; }
.t-land .t-card { border: var(--t-border); }
.t-land .t-card p { margin: 0; color: var(--t-muted); font-size: 15px; }
.t-brand { margin: 0 0 20px; font-family: var(--t-font-display); font-size: 18px; font-weight: 700; color: var(--t-brand-ink); }
.t-lead { margin: 0 0 24px; font-size: 17px; color: var(--t-muted); }
.t-hero .t-link { display: flex; justify-content: center; margin-top: 8px; }
.t-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--t-gap-card); }
.t-steps .t-card { display: flex; gap: 14px; align-items: flex-start; }
.t-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--t-r-pill); background: var(--t-brand-soft); color: var(--t-brand-ink); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.t-list { list-style: none; margin: 0; padding: 6px 20px; }
.t-list li { padding: 14px 0; border-top: var(--t-border); font-size: 15px; color: var(--t-muted); }
.t-list li:first-child { border-top: 0; }
.t-list b { color: var(--t-ink); }
.t-btn--secondary { background: var(--t-bg); color: var(--t-ink); border: var(--t-border); font-weight: 600; min-height: 48px; }