/* Ruta · landing pública de venta. Móvil primero. Tokens de Ruta en /assets/design-tokens.css (solo claro) (propietario: ARCHITECT). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.landing { font-size: var(--fs-md); }
.landing main, .landing .nav, .landing .foot { max-width: 68rem; margin: 0 auto; padding: 0 var(--sp-5); }
.nav { display: flex; justify-content: space-between; align-items: center; min-height: 4rem; }
.nav nav { display: flex; gap: var(--sp-4); align-items: center; }
.nav nav a { text-decoration: none; color: var(--text-muted); font-weight: var(--fw-medium); }
.nav nav a.btn { color: var(--text); }
.brand { font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--accent); text-decoration: none; letter-spacing: var(--ls-tight); }
h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.label { display: block; margin: var(--sp-6) 0 var(--sp-3); }
/* hero */
.hero { padding: var(--sp-4) 0 var(--sp-10); }
.hero h1 { font-size: clamp(1.9rem, 6.5vw, 3rem); max-width: 22ch; }
.lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-normal); margin: var(--sp-4) 0 var(--sp-5); max-width: 40rem; }
.cta { margin: 0; }
.btn-lg { min-height: 3.5rem; font-size: var(--fs-lg); padding: 0 var(--sp-8); width: 100%; }
.garantia { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; }
.captura { margin: var(--sp-8) 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.captura img, .paso img, .extra img { display: block; width: 100%; height: auto; }
/* cómo funciona */
.pasos { padding: var(--sp-8) 0; border-top: 1px solid var(--border); }
.grid-pasos { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-8); }
.paso figure, .extra figure { margin: 0 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
figure.movil { max-width: 16rem; }
.paso h3, .extra h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); display: flex; gap: var(--sp-3); align-items: flex-start; }
.paso .n { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.paso p, .extra p { color: var(--text-muted); margin: 0; line-height: var(--lh-normal); }
.extra { margin-top: var(--sp-8); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: grid; gap: var(--sp-4); }
/* planes */
.planes { padding: var(--sp-8) 0; border-top: 1px solid var(--border); }
.planes .sub { color: var(--text-muted); margin: 0 0 var(--sp-6); max-width: 44rem; }
.grid-planes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.plan { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.plan.destacado { border: 2px solid var(--accent); box-shadow: var(--shadow-md); }
.plan .etiqueta { position: absolute; top: -0.8rem; left: var(--sp-5); margin: 0; background: var(--accent); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-full); }
.plan h3 { font-size: var(--fs-lg); }
.plan .precio { margin: 0; font-variant-numeric: tabular-nums; }
.plan .precio b { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.plan .precio span { color: var(--text-muted); font-size: var(--fs-sm); }
.plan .usd { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.limites { list-style: none; margin: var(--sp-2) 0 var(--sp-3); padding: 0; color: var(--text); font-size: var(--fs-sm); display: grid; gap: 4px; }
.limites li::before { content: '✓ '; color: var(--success); font-weight: var(--fw-bold); }
.plan .btn { margin-top: auto; text-decoration: none; }
.btn-block { display: flex; width: 100%; }
.planes .nota { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-5) 0 0; max-width: 44rem; }
/* faq */
.faq { padding: var(--sp-8) 0; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; padding: var(--sp-4) 0; font-weight: var(--fw-semibold); font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-weight: var(--fw-bold); }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 var(--sp-4); color: var(--text-muted); line-height: var(--lh-normal); }
/* cierre y pie */
.cierre { padding: var(--sp-10) 0; text-align: center; border-top: 1px solid var(--border); }
.cierre h2 { margin-bottom: var(--sp-5); }
.foot { padding: var(--sp-8) var(--sp-5) var(--sp-10); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-sm); }
.foot p { margin: 0 0 var(--sp-3); }
.foot .priv { font-size: var(--fs-xs); color: var(--text-faint); }
@media (min-width: 48rem) {
  .btn-lg { width: auto; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; padding: var(--sp-8) 0 var(--sp-12); }
  .hero .label { grid-column: 1; margin-top: 0; }
  .hero .captura { grid-column: 2; grid-row: 1 / 7; margin: 0; }
  .grid-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .paso figure { aspect-ratio: 16 / 10; }
  .paso figure img { object-fit: cover; object-position: top left; height: 100%; }
  figure.movil { max-width: none; }
  .extra { grid-template-columns: 14rem minmax(0, 1fr); align-items: center; }
  .grid-planes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) { .hero .captura img { object-fit: cover; object-position: top left; max-height: 16rem; } }
/* Ruta: escala de escritorio (los tokens de Ruta traen 18 px para el vendedor) y bordes marcados */
body.landing { font-size: var(--fs-sm); }
.lead { font-size: var(--fs-md); }
.plan, .paso figure, .extra figure, .captura, .extra { border-width: var(--border-w); }
.plan.destacado { border-color: var(--accent); }
.paso .n { background: var(--accent); color: #fff; }
.captura, .plan.destacado { box-shadow: none; }