/* inicio.css — página principal (spec 13). Requiere marca.css y base.css. Solo tokens. */
.ancho { max-width:880px; margin:0 auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.marca { font-size:22px; }
.entrar { font-weight:600; text-decoration:none; padding:8px 14px; border-radius:var(--radio); }
.entrar:hover { background:var(--color-acento-suave); }

.hero { padding:40px 0 32px; }
.hero h1 { font-size:clamp(32px, 7vw, 52px); line-height:1.08; letter-spacing:-1.5px;
           margin:0 0 16px; font-weight:800; max-width:16ch; }
.hero p { font-size:19px; color:var(--color-texto-suave); margin:0 0 28px; max-width:36ch; }
.botones { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.boton { display:inline-block; background:var(--color-acento); color:var(--color-acento-texto); font-weight:700;
         padding:14px 22px; border-radius:var(--radio-medio); text-decoration:none; font-size:17px; }
.boton:hover { filter:brightness(1.08); }
.boton-sec { display:inline-block; padding:14px 18px; font-weight:600; text-decoration:none; }
.letra-chica { font-size:14px; color:var(--color-texto-suave); margin-top:12px; }

section { padding:28px 0; }
h2 { font-size:24px; letter-spacing:var(--interletra-titulo); margin:0 0 16px; }
.pasos { list-style:none; padding:0; margin:0; display:grid; gap:12px;
         grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); counter-reset:paso; }
.pasos li { background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio-grande);
            padding:18px; counter-increment:paso; }
.pasos li::before { content:counter(paso); display:inline-grid; place-items:center;
                    width:28px; height:28px; border-radius:50%; background:var(--color-acento-suave);
                    color:var(--color-acento); font-weight:800; margin-bottom:8px; }
.pasos b { display:block; margin-bottom:4px; }
.pasos span { color:var(--color-texto-suave); font-size:15px; }
.nota { color:var(--color-texto-suave); font-size:15px; margin:12px 0 0; }

.comercios { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.comercios li { background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio-pastilla);
                padding:8px 16px; font-weight:600; }

.planes { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.plan { background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio-grande); padding:20px; }
.plan.destacado { border:2px solid var(--color-acento); }
.plan h3 { margin:0 0 4px; font-size:18px; }
.plan .precio { font-size:30px; font-weight:800; letter-spacing:-1px; margin:4px 0; }
.plan .precio small { font-size:15px; font-weight:500; color:var(--color-texto-suave); letter-spacing:0; }
.plan p { margin:0; color:var(--color-texto-suave); font-size:15px; }
.plan.pronto { border-style:dashed; display:flex; align-items:center; }

details { background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:var(--radio-medio);
          padding:14px 18px; margin-bottom:8px; }
summary { cursor:pointer; font-weight:600; }
details p { margin:10px 0 0; color:var(--color-texto-suave); }

footer { color:var(--color-texto-suave); font-size:14px; padding:32px 0 40px; border-top:1px solid var(--color-borde);
         margin-top:24px; }