/* Páginas de descarga de Easy Pay (easypaybo.com/app/). Mismo estilo que la
   página de siempre: fondo oscuro, amarillo de la marca, columna angosta. */
:root { --ink:#1A1B1E; --card:#25262B; --line:#33343A;
        --yellow:#FFC400; --muted:#8B8D93; --soft:#B9BCC2; --ok:#3DDC84; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:#fff; min-height:100vh;
       font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       -webkit-font-smoothing:antialiased; }
.wrap { max-width:520px; margin:0 auto; padding:28px 16px 56px; }

.logo { font-weight:900; font-size:38px; line-height:.88; letter-spacing:-.035em;
        color:var(--yellow); margin-bottom:22px; display:inline-block; text-decoration:none; }
.logo span { display:block; }
.volver { display:block; width:max-content; color:var(--soft); text-decoration:none;
          font-size:14px; margin-bottom:18px; }
.paso p a { color:var(--yellow); }
.volver:hover { color:#fff; }

h1 { font-size:26px; font-weight:800; margin:0 0 10px; line-height:1.2; }
.lede { color:var(--soft); font-size:15.5px; line-height:1.55; margin:0 0 24px; }
h2 { font-size:12px; text-transform:uppercase; letter-spacing:.1em;
     color:var(--yellow); margin:32px 0 14px; font-weight:800; }

/* Tarjetas de la página central */
.opciones { display:grid; gap:12px; }
.opcion { display:flex; align-items:center; gap:14px; background:var(--card);
          border:1px solid var(--line); border-radius:16px; padding:16px 18px;
          color:#fff; text-decoration:none; }
.opcion:hover { border-color:var(--yellow); }
.opcion .ico { flex:none; width:46px; height:46px; border-radius:12px; background:#33343A;
               display:flex; align-items:center; justify-content:center; font-size:24px; }
.opcion .txt { flex:1; min-width:0; }
.opcion .txt b { display:block; font-size:16.5px; margin-bottom:2px; }
.opcion .txt small { color:var(--soft); font-size:13.5px; line-height:1.4; }
.opcion .flecha { flex:none; color:var(--muted); font-size:22px; }
.grupo { color:var(--muted); font-size:12.5px; margin:22px 0 10px; font-weight:700;
         text-transform:uppercase; letter-spacing:.08em; }

.pill { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em;
        padding:3px 9px; border-radius:999px; margin-bottom:6px; text-transform:uppercase; }
.pill.ya { background:rgba(61,220,132,.15); color:var(--ok); }
.pill.pronto { background:rgba(255,196,0,.15); color:var(--yellow); }

.btn { display:block; background:var(--yellow); color:var(--ink); text-decoration:none;
       font-weight:900; font-size:17px; text-align:center; padding:17px;
       border-radius:15px; }
.meta { color:var(--muted); font-size:12.5px; text-align:center; margin:10px 0 0; }

.aviso { background:rgba(255,196,0,.1); border:1px solid rgba(255,196,0,.35);
         border-radius:14px; padding:14px 16px; color:var(--soft); font-size:14px;
         line-height:1.55; }
.aviso b { color:#fff; }

/* Pasos numerados */
.paso { display:flex; gap:14px; margin-bottom:18px; }
.n { flex:none; width:27px; height:27px; border-radius:50%; background:var(--yellow);
     color:var(--ink); font-weight:900; font-size:14px;
     display:flex; align-items:center; justify-content:center; }
.paso h3 { margin:2px 0 4px; font-size:15.5px; font-weight:700; }
.paso p  { margin:0; color:var(--soft); font-size:14px; line-height:1.55; }
.paso p b { color:#fff; }

/* Capturas: se deslizan de costado en el celular */
.capturas { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px;
            scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.capturas figure { margin:0; flex:none; scroll-snap-align:start; }
.capturas img { display:block; border-radius:14px; border:1px solid var(--line);
                background:#000; }
.capturas.tel img { width:190px; height:auto; }
.capturas.auto img { width:300px; height:auto; }
.capturas figcaption { color:var(--muted); font-size:12.5px; margin-top:6px;
                       max-width:300px; line-height:1.4; }
.nota { color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:8px; }

.box { background:var(--card); border:1px solid var(--line); border-radius:15px;
       padding:16px 18px; margin-bottom:12px; }
.box h3 { margin:0 0 6px; font-size:15px; font-weight:800; }
.box p  { margin:0; color:var(--soft); font-size:13.8px; line-height:1.55; }
.box a  { color:var(--yellow); }

.foot { color:var(--muted); font-size:12.5px; text-align:center;
        margin-top:36px; line-height:1.75; border-top:1px solid var(--line); padding-top:20px; }
.foot a { color:var(--yellow); text-decoration:none; }
.foot .ver { opacity:.7; }