/* Vende con Marketon Autos (#/vende). El hero es el componente unificado de hero.css; aquí la línea de tiempo, las condiciones,
   los planes y el cierre en tinta. Archivo solo en el titular de la portada. */

/* portada: el hero vive en hero.css (hero unificado, 2-nov) */

/* el lead calificado, como llega al vendedor */
.lc{background:var(--ma-surface);border-radius:var(--ma-radius-xl);box-shadow:0 0 0 1px var(--ma-line),var(--ma-shadow-2);padding:20px 20px 18px;display:grid;gap:16px}
.lc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lc-top .mono{font-size:13px;color:var(--ma-muted)}
.lc-auto{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--ma-line)}
.lc-auto img{width:96px;height:72px;object-fit:cover;border-radius:10px}
.lc-auto b{display:block;font-size:16px;line-height:1.3;font-weight:650;color:var(--ma-fg)}
.lc-auto span{display:block;margin-top:3px;font-size:14px;color:var(--ma-muted)}
.lc-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--ma-line);overflow:hidden}
.lc-r div{padding:10px 14px}
.lc-r div:nth-child(odd){border-right:1px solid var(--ma-line)}
.lc-r div:nth-child(n+3){border-top:1px solid var(--ma-line)}
.lc-r dt{font-size:12px;color:var(--ma-muted)}
.lc-r dd{margin-top:2px;font-size:15px;font-weight:600;color:var(--ma-fg)}
.lc-wa{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ma-ok-text)}
.lc-wa i{font-size:18px;color:var(--ma-ok-solid)}

/* secciones */
.vs{padding:88px 0 0}

/* cómo funciona: línea de tiempo, no tarjetas */
.linea{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative;counter-reset:p}
.linea li{position:relative;display:grid;gap:16px;padding-right:32px}
.linea li::before{content:"";position:absolute;left:44px;right:0;top:21px;height:2px;background:var(--ma-line-strong)}
.linea li:last-child::before{display:none}
.linea .n{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ma-surface);box-shadow:inset 0 0 0 2px var(--ma-fg);font-family:var(--ma-font-mono);font-size:15px;font-weight:500;color:var(--ma-fg)}
.linea li:first-child .n{background:var(--ma-fg);color:#fff;box-shadow:none}
.linea b{display:block;font-size:19px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--ma-fg);max-width:22ch}
.linea p{margin-top:6px;font-size:15.5px;color:var(--ma-body);max-width:36ch}

/* qué es un lead calificado */
.vs-calif{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.calif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ma-line-strong)}
.calif li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:20px 20px 20px 0;border-bottom:1px solid var(--ma-line)}
.calif li:nth-child(even){padding-left:20px;padding-right:0;border-left:1px solid var(--ma-line)}
.calif i{font-size:22px;color:var(--ma-ok-solid);margin-top:1px}
.calif b{display:block;font-size:17px;font-weight:650;color:var(--ma-fg);letter-spacing:-.005em}
.calif p{margin-top:4px;font-size:15px;color:var(--ma-body)}
.devuelve{margin-top:20px;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:16px 18px;border-radius:var(--ma-radius-lg);background:var(--ma-ok-bg);box-shadow:inset 0 0 0 1px var(--ma-ok-border)}
.devuelve i{font-size:24px;color:var(--ma-ok-text)}
.devuelve b{display:block;font-size:16px;color:var(--ma-ok-text)}
.devuelve p{margin-top:2px;font-size:15px;color:var(--ma-fg)}

/* planes */
.planes-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.cuantos .opts{margin-top:4px}
.planes{margin-top:28px}
.plan{position:relative;transition:box-shadow var(--ma-motion-base) var(--ma-motion-ease-out)}
.plan.toca{box-shadow:inset 0 0 0 2px var(--ma-action),var(--ma-shadow-1)}
.toca-tag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;color:var(--ma-link)}
.toca-tag i{font-size:16px}
.plan li b{font-weight:650;color:var(--ma-fg)}
.cotiza{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:16px 20px;border-radius:var(--ma-radius-lg);background:var(--ma-surface);box-shadow:inset 0 0 0 1px var(--ma-line)}
.cotiza.toca{box-shadow:inset 0 0 0 2px var(--ma-action)}
.cotiza p{font-size:15.5px;color:var(--ma-body)}
.cotiza b{color:var(--ma-fg)}

/* preguntas en acordeón (también las usa #/preguntas) */
.vs-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.faq-l{border-top:1px solid var(--ma-line-strong)}
.faq-l details{border-bottom:1px solid var(--ma-line)}
.faq-l summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 4px;cursor:pointer;font-size:17px;font-weight:600;color:var(--ma-fg);letter-spacing:-.005em}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l summary:hover{color:var(--ma-link)}
.faq-l summary i{flex:none;font-size:20px;color:var(--ma-fg);transition:transform var(--ma-motion-base) var(--ma-motion-ease-out)}
.faq-l details[open] summary i{transform:rotate(45deg)}
.faq-l details p{padding:0 44px 18px 4px;font-size:15.5px;line-height:1.6;color:var(--ma-body);max-width:68ch}

/* cierre en tinta */
.cierre{margin-top:96px;background:var(--ma-tinta-900);color:var(--ma-tx-ondark-body)}
.cierre .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;padding-top:52px;padding-bottom:52px}
.cierre h2{font-size:clamp(26px,2.8vw,38px);line-height:1.15;font-weight:750;letter-spacing:-.02em;color:#fff;max-width:22ch}
.cierre p{margin-top:10px;max-width:52ch}
main:has(.cierre) + .mf{margin-top:0}

/* hoja de alta */
.alta{display:grid;gap:16px}
.alta-i{font-size:15px;color:var(--ma-body)}
.alta .opts .opt{flex:1 1 auto;justify-content:center}
.chk input:focus-visible + .box{box-shadow:var(--ma-shadow-focus)}
.chk.on .box{background:var(--ma-action);box-shadow:none}
.chk .box i{opacity:0}
.chk.on .box i{opacity:1}
.chk a{color:var(--ma-link)}
.alta-ok{display:grid;justify-items:center;text-align:center;gap:10px;padding:16px 4px 4px}
.alta-ok>i{font-size:44px;color:var(--ma-ok-solid)}
.alta-ok h3{font-size:22px;font-weight:700;color:var(--ma-fg);letter-spacing:-.015em}
.alta-ok p{max-width:40ch;color:var(--ma-body)}
.alta-ok .btn{margin-top:10px}

@media (max-width:1024px){
 .vs-calif,.vs-faq{grid-template-columns:minmax(0,1fr);gap:24px}
 .plans.planes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
 .vs{padding-top:64px}
 .linea{grid-template-columns:minmax(0,1fr);gap:0}
 .linea li{grid-template-columns:44px minmax(0,1fr);padding:0 0 28px 0}
 .linea li::before{left:21px;top:44px;bottom:0;right:auto;width:2px;height:auto}
 .calif{grid-template-columns:minmax(0,1fr)}
 .calif li,.calif li:nth-child(even){padding:16px 0;border-left:0}
 .faq-l details p{padding-right:4px}
 .cierre{margin-top:72px}
 .cierre .wrap{grid-template-columns:minmax(0,1fr);padding-top:40px;padding-bottom:40px}
 .cierre .btn{width:100%}
 .lc{padding:16px}
 .lc-r dd{font-size:14px}
}

/* Nosotros ponemos lo digital; tú pones los autos (Chucho, 1-nov) */
.vs-pone{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px}
.vs-pone>div{background:var(--ma-niebla-0);border:1px solid var(--ma-niebla-200);border-radius:var(--ma-radius-lg,18px);padding:22px 24px}
.vs-pone h3{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ma-fg);margin-bottom:12px}
.vs-pone ul{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.vs-pone li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:16px;line-height:1.5;color:var(--ma-body)}
.vs-pone li i{font-size:22px;color:var(--ma-azul-600,#1F57DB);margin-top:2px}
.vs-pone li b{color:var(--ma-fg)}
.vh-f{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:999px;background:var(--ma-ok-bg,#E6F4EE);color:var(--ma-ok-text,#0F5132);font-weight:600;font-size:14px}
@media (max-width:640px){.vs-pone{grid-template-columns:1fr;gap:16px}.vs-pone>div{padding:18px}}

/* Mockup de WhatsApp en la portada de /vende (Chucho, 1-nov): el aviso con el resumen y los botones, y los datos después de
   tomarlo. Sustituye a la tarjeta de "sección de leads", que no existe en el MVP. Los .lc siguen vivos para la página del lead. */
.wa-mock{background:var(--ma-surface);border-radius:var(--ma-radius-xl);box-shadow:0 0 0 1px var(--ma-line),var(--ma-shadow-2);overflow:hidden}
.wa-h{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--ma-wa-dark);color:#fff}
.wa-h .av{width:36px;height:36px;border-radius:50%;background:var(--ma-action);display:grid;place-items:center;flex:none}
.wa-h .av img{width:22px;height:22px;display:block}
.wa-h b{display:block;font-size:15px;font-weight:650;line-height:1.2}
.wa-h span{display:block;font-size:12px;opacity:.8;margin-top:2px}
.wa-c{display:grid;gap:10px;padding:16px;background:var(--ma-niebla-50)}
.wa-b{position:relative;max-width:90%;padding:10px 12px 8px;border-radius:12px;font-size:14px;line-height:1.45;color:var(--ma-wa-ink);background:var(--ma-surface);box-shadow:0 1px 1px rgba(0,0,0,.06)}
.wa-b.in{border-top-left-radius:4px;justify-self:start}
.wa-b.out{border-top-right-radius:4px;justify-self:end;background:#D9FDD3}
.wa-b p+p{margin-top:6px}
.wa-b .mono{font-size:12px}
.wa-t{display:block;text-align:right;font-size:12px;color:var(--ma-muted);margin-top:4px}
.wa-btns{display:grid;margin:10px -12px -8px;border-top:1px solid var(--ma-line)}
.wa-btns span{display:block;text-align:center;padding:10px 12px;font-weight:600;color:var(--ma-wa-dark)}
.wa-btns span+span{border-top:1px solid var(--ma-line)}
@media (max-width:640px){
 .wa-c{padding:12px}
 .wa-b{max-width:94%;font-size:13px}
}
/* "Mon te acompaña por WhatsApp": una sola tarjeta con el estilo de "quién pone qué" */
/* Mon te acompaña (2-nov): título, párrafo y tarjeta a la izquierda, centrados contra la conversación de WhatsApp de Mon
   (figure.wa-fig) a la derecha, como el texto del hero contra su marco; en una columna por debajo de 1024 */
.vs-mon{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.vs-mon-txt{min-width:0}
.vs-mon .vs-pone{grid-template-columns:minmax(0,1fr);max-width:760px}
.vs-mon .wa-fig{margin:0;min-width:0;max-width:440px;justify-self:end;width:100%}
.vs-mon .wa-fig figcaption{margin-top:10px;font-size:13px;line-height:1.4;color:var(--ma-body)}
.wa-h .av.mon{background:transparent}
.wa-h .av.mon img{width:36px;height:36px}
.wa-b .wa-link{color:var(--ma-link);text-decoration:underline}
@media (max-width:1023px){.vs-mon{grid-template-columns:minmax(0,1fr);gap:20px}.vs-mon .wa-fig{max-width:none;justify-self:stretch}}
/* Mon como Kopi en Kavak (benchmark, 2-nov): tarjeta propia, su marca (la M de la vitrina con dos ojos, logo v2) y la etiqueta
   "Asistente con IA" arriba del título; el texto y la conversación de WhatsApp adentro */
.mon-card{background:var(--ma-surface);border-radius:var(--ma-radius-xl);box-shadow:0 0 0 1px var(--ma-line),var(--ma-shadow-1);padding:48px 56px}
.mon-cab{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.mon-cab img{width:48px;height:48px;display:block}
.mon-chip{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;background:var(--ma-ok-bg);color:var(--ma-ok-text);font-size:13px;font-weight:600}
.mon-card .vs-pone>div{background:var(--ma-niebla-50);border-color:transparent}
@media (max-width:640px){.mon-card{padding:24px 20px}.mon-cab img{width:44px;height:44px}}
/* Plan recomendado (decisión 28): la tarjeta usa el mismo destacado de .plan.toca; esto es solo el porqué */
.rec-por{margin-top:10px;padding:10px 12px;border-radius:var(--ma-radius-md,12px);background:var(--ma-action-soft);font-size:14px;line-height:1.45;color:var(--ma-fg)}
/* Cuatro ofertas, cuatro tarjetas (decisión 35): Esencial, Profesional, Empresarial y Particular en una fila */
.plans.planes{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){ .plans.planes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .plans.planes{grid-template-columns:minmax(0,1fr)} }
.vs-pone .vs-nota{margin-top:14px;font-size:14px;color:var(--ma-muted)}

/* Planes v2 (decisión 41, 2-nov): Particular primero, de menor a mayor; filas alineadas por subgrid para que cada precio,
   cada línea de fundador y cada viñeta caigan a la misma altura en las cuatro tarjetas. Diseño: 04-Marca/v3/planes/ */
.plans.planes{align-items:stretch}
.plans.planes .plan{display:grid;grid-template-rows:subgrid;grid-row:span 10;row-gap:0;align-content:start}
.plans.planes .plan .pt{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0}
.plans.planes .plan .pt span{white-space:nowrap}
.plans.planes .toca-tag{margin:6px 0 0;min-height:22px;line-height:22px}
.plans.planes .plan .pp{margin:12px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;line-height:1.1}
.plans.planes .plan .pp b{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ma-fg)}
.plans.planes .plan .pp small{font-size:14px;font-weight:500;color:var(--ma-muted)}
.plans.planes .plan .fnd{margin:8px 0 0;min-height:40px;font-size:13.5px;line-height:1.45;color:var(--ma-body)}
.pl-li{display:flex;gap:8px;align-items:flex-start;margin:0;padding:9px 0 0;font-size:14.5px;line-height:1.4;color:var(--ma-body)}
.pl-li:nth-of-type(3){margin-top:6px;padding-top:14px;border-top:1px solid var(--ma-line)}
.pl-li i{flex:none;font-size:18px;color:var(--ma-action,var(--ma-link));margin-top:1px}
.pl-li b{font-weight:650;color:var(--ma-fg)}
.plans.planes .plan .btn{margin-top:18px;align-self:end}
.planes-por{margin-top:16px;display:flex;gap:10px;align-items:flex-start;max-width:820px}
.planes-por i{flex:none;font-size:18px;color:var(--ma-link)}

/* Vendedores fundadores (Chucho, 2-nov): qué es un fundador, junto a los planes; el contador de lugares es el real */
/* Vendedores fundadores (2-nov): tarjeta con la ilustración del ecosistema a la izquierda (misma receta que .sec-con-foto) y el
   texto a la derecha; la ilustración se compuso a 16:9, así que no se recorta a 4:3 */
.fundadores{margin-top:24px;padding:24px;border-radius:var(--ma-radius-lg);background:var(--ma-surface);box-shadow:0 0 0 1px var(--ma-line)}
.fundadores h3{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ma-fg)}
.fundadores h3 i{font-size:26px;color:var(--ma-fg)}
.fundadores .sec-con-foto{margin-top:16px}
.fundadores .sec-foto img{aspect-ratio:16/9;max-height:none}
.fundadores p{font-size:15.5px;line-height:1.5;color:var(--ma-body);max-width:62ch}
.fundadores .vh-f{margin-top:12px}
@media (max-width:640px){.fundadores{grid-template-columns:minmax(0,1fr);gap:10px;padding:18px}.fundadores>i{display:none}}
/* la foto del lote con el aviso en "Nosotros ponemos la vitrina…" (2-nov) */
.sec-con-foto+.vs-pone{margin-top:32px}
/* Preguntas en dos columnas (Chucho, 2-nov): /vende y Compra. Cada columna es su propia lista, así abrir una pregunta no
   mueve la otra columna. En tablet y celular, una sola columna sin doble línea entre las dos listas. */
.faq-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start;margin-top:24px}
.faq-sec{margin-top:72px}
.faq-2+.seguro-mas{margin-top:12px}
@media (max-width:900px){
 .faq-2{grid-template-columns:minmax(0,1fr)}
 .faq-2 .faq-l+.faq-l{border-top:0}
}
@media (max-width:640px){ .faq-sec{margin-top:48px} }

/* ── pase de color (Chucho, 2-nov; decisión 57; canónico 04-Marca/v3/color/color-v1.css, bloques 5 y 6) ──
   "Nosotros ponemos la vitrina" y "Planes" en niebla 100 (las tarjetas blancas resaltan); "Qué es un lead calificado" en blanco;
   "Preguntas" en azul 100; el cierre en tinta 900 pegado a las preguntas. Ritmo: blanco, niebla 50, niebla 100, niebla 50,
   blanco, niebla 50, niebla 100, azul 100, tinta 900, tinta 950. */
.vs:has(.vs-pone):not(:has(.vs-mon)){margin-top:88px;padding:72px 0 80px;background:var(--ma-niebla-100)}
.vs:has(.vs-calif){margin-top:88px;padding:72px 0 80px;background:var(--ma-surface)}
#planes{margin-top:88px;padding:72px 0 80px;background:var(--ma-niebla-100)}
.vs:has(.faq-2){margin-top:88px;padding:72px 0 88px;background:var(--ma-azul-100)}
.cierre{margin-top:0}
@media (max-width:640px){
 .vs:has(.vs-pone):not(:has(.vs-mon)),.vs:has(.vs-calif),#planes,.vs:has(.faq-2){margin-top:64px;padding:52px 0 60px}
 .cierre{margin-top:0}
}
/* Listas de preguntas, siempre en tarjeta blanca (Vende, #/preguntas, la ficha y Compra). Una lista sola es la tarjeta; donde van
   dos listas en dos columnas (.faq-2) la tarjeta es el contenedor y las listas van dentro, así en celular (una columna) siguen
   leyéndose como una sola lista y no como dos tarjetas apiladas. */
.faq-l{padding:6px 24px;border-top:0;border-radius:var(--ma-radius-xl);background:var(--ma-surface);box-shadow:0 0 0 1px var(--ma-line)}
.faq-l details:last-child{border-bottom:0}
.faq-2{padding:6px 24px;border-radius:var(--ma-radius-xl);background:var(--ma-surface);box-shadow:0 0 0 1px var(--ma-line)}
.faq-2 .faq-l{padding:0;border-radius:0;background:none;box-shadow:none}
.faq-2 .faq-l details:last-child{border-bottom:0}
@media (max-width:900px){.faq-2 .faq-l:not(:last-child) details:last-child{border-bottom:1px solid var(--ma-line)}} /* en una columna, la primera lista cierra con línea */
.vs:has(.faq-2) .faq-2{box-shadow:0 0 0 1px var(--ma-azul-200)}
@media (max-width:640px){.faq-l,.faq-2{padding:4px 16px;border-radius:var(--ma-radius-lg)}}
/* "Próximamente" para lo que /vende anuncia y aún no existe (Chucho, 2-nov, C1: la ayuda de precio de Mon llega en la etapa C) */
.pronto{display:inline-block;margin-right:4px;padding:1px 8px;border-radius:var(--ma-radius-pill);background:var(--ma-action-soft);color:var(--ma-link);font-size:12px;font-weight:650;line-height:1.6;vertical-align:1px}