/* Hero unificado (2-nov-2026): un solo componente .hero para Inicio, Vende, Contacto y cualquier página con hero.
   Copia del canónico 04-Marca/v3/hero/hero-v2.css (clientes-docs); si cambia, cambia primero allá y se vuelve a copiar aquí.
   Solo cambia el contenido; la sección, la rejilla, el h1, el párrafo, la fila de acción, la línea de apoyo y el marco 4:5
   son los mismos. Carga el sistema v3 tal cual lo sirve qa y solo define lo del hero y la franja Explora.
   Medidas: README.md de esta carpeta (es la especificación; se mide con render-hero.mjs). */


/* ---- sección y rejilla ---- */
.hero{padding:64px 0 72px;background:var(--ma-surface);border-bottom:1px solid var(--ma-line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.hero-txt{min-width:0}

/* ---- h1 ---- */
.hero h1{font-size:clamp(38px,4.2vw,60px);line-height:1.02;letter-spacing:-.02em;font-weight:800;color:var(--ma-fg);max-width:14ch;text-wrap:balance}

/* ---- párrafo ---- */
.hero-lead{margin-top:20px;font-size:var(--ma-text-lead);line-height:var(--ma-lh-lead);max-width:52ch;color:var(--ma-body)}

/* ---- fila de acción: controles de 52 px ---- */
.hero-acc{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-acc .btn{min-height:52px}
.hero-buscar{flex-wrap:nowrap;max-width:560px}
.hero-buscar .inp{flex:1 1 auto;min-width:0;min-height:52px}
.hero-buscar .inp input:focus-visible{box-shadow:none}

/* ---- línea de apoyo ---- */
.hero-nota{margin-top:16px;font-size:14px;line-height:1.5;color:var(--ma-body)}
.hero-nota b{color:var(--ma-fg);font-weight:600}
.hero-nota .vh-f{margin-top:6px}

/* ---- marco 4:5 (a 1440: 480×600) ---- */
.hero-marco{position:relative;width:100%;min-width:0;aspect-ratio:4/5;margin:0;border-radius:var(--ma-radius-xl);overflow:hidden;background:var(--ma-surface);box-shadow:0 0 0 1px var(--ma-line),var(--ma-shadow-1)}
.hero-marco>*{width:100%}

/* Inicio: la tarjeta del catálogo al 100 % de ancho, llenando el marco; el marco pone el redondeo y la sombra */
.hero-marco .exp{height:100%;display:flex;flex-direction:column;margin:0;border-radius:0;box-shadow:none}
.hero-marco .exp:hover{transform:none;box-shadow:none}
.hero-marco .exp-media{flex:none;border-radius:0}
.hero-marco .exp-body{flex:1;min-height:0;display:flex;flex-direction:column}
.hero-marco .exp .pap:not(.cmp){margin-top:auto}
@media (min-width:1024px){
 /* en el marco de 480 la tarjeta va un poco más holgada que en la rejilla (como hoy la portada); la foto a 3:2 (480 × 320)
    para que los papeles quepan completos y 2 × 2 como en el catálogo en los 280 px que quedan (a 4:3 la segunda fila salía
    del marco; en una sola fila de cuatro, "Al corriente" se partía en dos renglones) */
 .hero-marco .exp-media{aspect-ratio:3/2}
 .hero-marco .exp-body{padding:18px 22px 20px;gap:12px}
 .hero-marco .exp-t{font-size:20px;line-height:1.25}
 .hero-marco .exp-s{font-size:15px}
 .hero-marco .exp-p b{font-size:30px;letter-spacing:-.03em}
}

/* Vende: el mockup de WhatsApp recortado al marco, con desvanecido de 48 px al pie */
.hero-marco.desv .wa-mock{border-radius:0;box-shadow:none}
.hero-marco.desv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--ma-surface));pointer-events:none}
/* la nota "Ejemplo con datos ficticios" va debajo del marco, alineada a su izquierda; cuelga en el margen inferior de la sección
   (posición absoluta) para que el alto de la sección sea el mismo que en Inicio */
.hero-fig{position:relative;margin:0;min-width:0}
.hero-fig figcaption{position:absolute;left:0;right:0;top:100%;margin-top:10px;font-size:13px;line-height:1.4;color:var(--ma-body);text-align:left}

/* ---- franja Explora (debajo del hero de Inicio): píldora de ubicación, atajos, marcas y ciudades ---- */
.explora{padding:20px 0 24px;background:var(--ma-niebla-100)} /* niebla 100 y sin línea desde el pase de color (2-nov): la franja cierra el hero blanco y los chips blancos se separan solos */
.explora .wrap{display:grid;gap:12px}
.explora-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.explora-cab h2{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ma-fg)}
.explora-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.explora-fila .chip{text-decoration:none}
.explora-fila .chip:hover{box-shadow:inset 0 0 0 1.5px var(--ma-fg)}
.explora-atajos .chip{min-height:44px;padding:0 16px;font-size:14.5px}
.explora-t{font-size:13px;font-weight:600;color:var(--ma-muted);white-space:nowrap;margin-right:2px}

/* ---- barra fija de Vende: solo existe en celular y solo cuando el botón del hero ya salió ---- */
.barra[hidden]{display:none}

/* ================= celular y tableta (< 1024): una columna, texto primero, imagen después ================= */
@media (max-width:1023px){
 .hero{padding:32px 0 40px}
 .hero .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
 .hero h1{font-size:clamp(32px,8.6vw,38px)}
 .hero-lead{font-size:17px;max-width:none}
 .hero-acc>.btn{flex:1 1 100%}
 .hero-marco{max-width:520px}
}
@media (max-width:640px){
 /* el buscador de Inicio: el campo a todo lo ancho y su botón de 52 px, como hoy en qa */
 .hero-buscar{max-width:none}
 .hero-buscar .btn{flex:none;width:52px;padding:0}
 .hero-buscar .btn span{display:none}
 .hero-marco{max-width:none}

 /* la tarjeta vertical dentro del marco (base.css la pone horizontal en celular; aquí sigue vertical como en el catálogo) */
 .hero-marco .exp{display:flex;flex-direction:column;border-radius:0}
 .hero-marco .exp-media{grid-row:auto;margin:0;border-radius:0;aspect-ratio:4/3}
 .hero-marco .exp-media .exp-cond{display:inline-block;left:10px;top:10px;font-size:12px;padding:6px 9px}
 .hero-marco .exp-media .car-count{right:10px;bottom:10px;top:auto;padding:5px 8px;font-size:12px;gap:5px}
 .hero-marco .exp-body{display:flex;flex-direction:column;padding:12px 16px 12px;gap:8px}
 .hero-marco .exp-cab,.hero-marco .exp .exp-p,.hero-marco .exp .exp-pie{padding:0;grid-column:auto;grid-row:auto}
 .hero-marco .exp-t{font-size:17px;line-height:1.3}
 .hero-marco .exp-t span{display:inline}
 .hero-marco .exp-s{font-size:14px;margin-top:2px}
 .hero-marco .exp-s .exp-s-cond{display:none}
 .hero-marco .exp-l{margin-top:2px}
 .hero-marco .exp .exp-p{align-self:auto;gap:4px 8px}
 .hero-marco .exp .exp-p b{font-size:24px}
 .hero-marco .exp .exp-p .engomado{font-size:12px;padding:4px 8px 4px 7px}
 .hero-marco .exp .pap:not(.cmp){display:none}
 .hero-marco .exp .pap.cmp{display:grid;grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--ma-line);border-bottom:0}

 /* Explora en celular: cada fila se desliza */
 .explora{padding:16px 0 18px}
 .explora-fila{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none}
 .explora-fila::-webkit-scrollbar{display:none}
 .explora-fila .chip{flex:none}
 .explora-t{flex:none}
}

/* Contacto: la imagen A llena el marco 4:5 (recorte centrado, sin deformar) */
.hero-marco>img{display:block;width:100%;height:100%;object-fit:cover}