/* Inicio (#/): portada con el producto como héroe, buscador y accesos por intención; lo verificado contra
   lo declarado; bajaron de precio; cómo funciona en línea de tiempo; banda de vendedores. */

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

/* "Cerca de ti": tres tarjetas de los autos más cercanos */
/* ---- tarjetas verticales también en el celular (carrusel) ---- */
@media (max-width:640px){
 .vert .exp{display:block;border-radius:16px}
 .vert .exp-media{grid-row:auto;margin:0;border-radius:16px 16px 0 0}
 .vert .exp-media .ej-l{display:inline}.vert .exp-media .ej-c{display:none}
 .vert .exp-media .ej{left:10px;top:10px}
 .vert .exp-body{display:flex;padding:14px 16px 16px;gap:12px}
 .vert .exp-cab,.vert .exp .exp-p,.vert .exp .exp-pie{padding:0}
 .vert .exp-t span{display:inline}
 .vert .exp .pap:not(.cmp){display:grid}
 .vert .exp .pap.cmp{display:none}
}

/* ---- secciones ---- */
.ini-sec{padding-top:80px}
.ini-dos{margin-top:28px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:var(--ma-radius-xl);overflow:hidden;box-shadow:0 0 0 1px var(--ma-line)}
.ini-dos>div{padding:28px 30px 30px}
.ini-dos .ver{background:var(--ma-ok-bg)}
.ini-dos h3{display:flex;align-items:center;gap:8px;font-size:19px;letter-spacing:-.01em;color:var(--ma-fg)}
.ini-dos .ver h3{color:var(--ma-ok-text)}
.ini-dos .ver h3 i{font-size:22px}
.ini-dos p{margin-top:10px;font-size:15.5px;color:var(--ma-fg);max-width:46ch}
.ini-dos .ver .repuve{margin-top:18px}
.ini-dos .dice{background:var(--ma-surface)}
.ini-ej{margin-top:18px;container-type:inline-size}
.ini-ej-pie{margin-top:8px!important;font-size:13px!important;color:var(--ma-muted)!important}

.ini-carrusel{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:20px;margin-top:24px}
.ini-todos{margin-top:24px}

/* cómo funciona: línea de tiempo */
/* Cuatro pasos en una sola línea horizontal en escritorio (Chucho, 1-nov noche); en el celular, vertical. */
.ini-linea{margin-top:32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.ini-linea::before{content:"";position:absolute;left:20px;right:calc(25% - 20px);top:20px;height:2px;background:var(--ma-line-strong)}
.ini-linea li{position:relative;display:grid;gap:14px;align-content:start}
.ini-nodo{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ma-surface);box-shadow:inset 0 0 0 2px var(--ma-fg);font-weight:700;font-size:16px;color:var(--ma-fg)}
.ini-linea li:first-child .ini-nodo{background:var(--ma-fg);color:#fff}
.ini-linea h3{font-size:18px;letter-spacing:-.01em;color:var(--ma-fg)}
.ini-linea p{margin-top:6px;font-size:15px;max-width:30ch}

/* banda de vendedores */
.ini-vend{margin-top:96px;background:var(--ma-tinta-900);color:var(--ma-tx-ondark-body)}
.ini-vend .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding-top:56px;padding-bottom:56px}
.ini-vend h2{font-family:var(--ma-font-display);font-weight:800;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.03em;color:#fff;max-width:22ch;text-wrap:balance}
.ini-vend p{margin-top:12px;max-width:54ch;font-size:16.5px}
.ini-vend .btn-inv:hover{background:var(--ma-niebla-100)}
.ini-vend .btn-inv:focus-visible{box-shadow:0 0 0 2px var(--ma-tinta-900),0 0 0 4px #fff}
#app:has(> .ini-vend:last-child) ~ .mf{margin-top:0}

@media (max-width:860px){
 .ini-dos{grid-template-columns:minmax(0,1fr)}
 .ini-carrusel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:8px;margin:20px -32px 0;padding-left:32px;padding-right:32px;scroll-padding:0 32px}
 .ini-carrusel>div{flex:0 0 min(340px,80%);scroll-snap-align:start}
}
@media (max-width:640px){
 .ini-sec{padding-top:56px}
 .ini-dos>div{padding:22px 20px 24px}
 .ini-carrusel{margin:18px -16px 0;padding-left:16px;padding-right:16px;scroll-padding:0 16px}
 .ini-carrusel>div{flex-basis:84%}
 .ini-todos{width:100%}
 .ini-linea{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:24px}
 .ini-linea::before{left:20px;right:auto;top:20px;bottom:20px;width:2px;height:auto}
 .ini-linea li{grid-template-columns:42px minmax(0,1fr);gap:14px}
 .ini-vend{margin-top:64px}
 .ini-vend .wrap{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:44px;padding-bottom:44px}
 .ini-vend .btn{width:100%}
}

/* fase 2: liga a "Qué revisamos y qué no" desde lo verificado */
.ini-confianza{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;font-weight:600;color:var(--ma-ok-text)}
.ini-confianza i{font-size:16px}
/* .dice también es la caja de "Lo demás que dice el vendedor" en ficha.css (max-width 640): aquí llena su columna */
.ini-dos .dice{max-width:none;border-radius:0;box-shadow:none;padding:28px 30px 30px}
@media (max-width:640px){.ini-dos .dice{padding:22px 20px 24px}}
.ini-carrusel.ini-cerca{grid-template-columns:repeat(3,minmax(0,1fr))}
.ini-otras{margin-top:28px;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ma-fg)}
.ini-otras+.ini-carrusel{margin-top:14px}
@media (max-width:860px){.ini-carrusel.ini-cerca{display:flex}}
/* tres ideas de Compra seguro junto a la foto de la sección del expediente */
.ini-seguro{margin-top:18px;display:grid;gap:12px}
.ini-seguro li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.5;color:var(--ma-body)}
.ini-seguro li i{font-size:22px;color:var(--ma-fg);margin-top:1px}
.ini-seguro b{color:var(--ma-fg);font-weight:650}
.sec-con-foto+.ini-dos{margin-top:32px}

/* ── pase de color (Chucho, 2-nov; decisión 57; canónico 04-Marca/v3/color/color-v1.css, bloque 4) ──
   "Lo que revisamos y lo que te dice el vendedor" es ayuda: banda en azul 100; "Cómo funciona" en superficie blanca; la banda
   de vendedores (tinta 900) pegada a ella. Ritmo de la página: blanco (hero), niebla 100 (Explora), niebla 50 (autos), azul 100
   (ayuda), niebla 50 (bajaron), blanco (cómo funciona), tinta 900, tinta 950 (pie). */
.ini-sec:has(.ini-dos){margin-top:80px;padding:72px 0 80px;background:var(--ma-azul-100)}
.ini-sec:has(.ini-dos) .ini-dos{box-shadow:0 0 0 1px var(--ma-azul-200)}
.ini-sec:has(.ini-linea){margin-top:80px;padding:72px 0 80px;background:var(--ma-surface)}
.ini-vend{margin-top:0}
@media (max-width:640px){
 .ini-sec:has(.ini-dos),.ini-sec:has(.ini-linea){margin-top:56px;padding:52px 0 56px}
 .ini-vend{margin-top:0}
}

/* Sin autos publicados (2-nov): el marco del hero enseña una foto en vez de la tarjeta del auto destacado. */
.hero-marco .hero-foto{display:block;width:100%;height:100%;object-fit:cover}