/* HagoElTrabajo v1832 — Módulo 1 · Página principal: diseño limpio
 *
 * Este archivo decide el ESPACIO de la página principal: un solo ancho de contenido, el mismo borde izquierdo
 * para todas las secciones, el mismo tamaño de títulos y el mismo ritmo vertical. Se carga al final de index.html.
 * (Antes, cada sección tenía su propio ancho y margen: 26, 30, 40, 43, 55, 64 o 99 px desde el borde.)
 * Las tarjetas de resultados son de search-results.css. Colores de marca: brand.css.
 */
body.het-home{
  --hl-max:1180px;
  --hl-gutter:clamp(16px,4vw,32px);
  --hl-pad:max(var(--hl-gutter),calc((100% - var(--hl-max)) / 2));
  --hl-block:clamp(40px,6vw,72px);
  --hl-ink:#131C24;--hl-muted:#4D565E;--hl-green:#0C4A7D;--hl-forest:#093960;--hl-line:#DDE1E5;--hl-soft:#F4F7F3;
  background:#fff;
}

/* ---------- un solo contenedor para todas las secciones ---------- */
body.het-home main>section{
  max-width:none!important;margin:0!important;box-sizing:border-box;
  padding-left:var(--hl-pad)!important;padding-right:var(--hl-pad)!important;
}
body.het-home main>section[hidden]{display:none!important}
body.het-home .hx-inner,body.het-home .het-why-in{max-width:none!important;margin:0!important;padding:0!important}

/* ---------- títulos: una sola escala ---------- */
body.het-home main h2{font-size:clamp(1.45rem,2.3vw,1.9rem)!important;font-weight:750!important;letter-spacing:-.02em;line-height:1.2;color:var(--hl-ink);margin:0 0 20px!important}
body.het-home .het-section-kicker,body.het-home .eyebrow{display:none!important}

/* ---------- encabezado: menos enlaces ---------- */
body.het-home .l2-nav a[href="#servicios"],body.het-home .l2-nav a[href="#como-funciona"]{display:none!important}

/* ---------- portada ---------- */
body.het-home #inicio{background:#fff!important;padding-top:clamp(24px,4vw,48px)!important;padding-bottom:clamp(28px,4vw,48px)!important;column-gap:clamp(24px,4vw,56px)}
body.het-home #inicio h1{font-size:clamp(2rem,4.4vw,3.2rem)!important;line-height:1.05!important;letter-spacing:-.03em;margin:0 0 14px!important;color:var(--hl-ink)}
body.het-home #inicio .hx-lede{font-size:clamp(1rem,1.3vw,1.125rem)!important;line-height:1.5;color:var(--hl-muted);max-width:56ch;margin:0 0 24px!important}
body.het-home #inicio .hx-search{box-shadow:0 1px 2px rgba(19,28,36,.06),0 8px 24px rgba(19,28,36,.08)!important;border:1px solid var(--hl-line)!important}
body.het-home #inicio .hx-hero-photo{border-radius:20px!important;box-shadow:none!important}
body.het-home #inicio .het-photo-sticker{display:none!important}

/* ---------- categorías ---------- */
body.het-home #servicios{padding-top:var(--hl-block)!important;padding-bottom:clamp(24px,3vw,40px)!important;background:#fff!important}
body.het-home #servicios .hx-section-head{margin:0 0 18px!important;padding:0!important;align-items:end}
body.het-home #servicios .hx-section-head h2{margin:0 0 12px!important}

/* ---------- resultados ---------- */
body.het-home #resultSection{background:var(--hl-soft)!important;padding-top:clamp(28px,4vw,48px)!important;padding-bottom:clamp(28px,4vw,48px)!important;border-radius:0!important;box-shadow:none!important}
body.het-home #resultSection .section-head{margin:0 0 18px!important;padding:0!important;align-items:center}
body.het-home #resultSection .section-head h2{margin:0!important}
body.het-home .featured-banner-slot,body.het-home .commercial-ad-slot{padding-top:16px!important}

/* ---------- cómo funciona: 3 pasos, sin cajas ---------- */
body.het-home #como-funciona{background:#fff!important;color:var(--hl-ink)!important;padding-top:var(--hl-block)!important;padding-bottom:var(--hl-block)!important}
body.het-home #como-funciona h2{color:var(--hl-ink)!important}
body.het-home #como-funciona ol{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)!important;margin:0!important;padding:0!important;list-style:none}
body.het-home #como-funciona li{display:block!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:var(--hl-ink)!important}
body.het-home #como-funciona .hx-num{display:inline-grid!important;place-items:center;width:36px!important;height:36px!important;border-radius:50%!important;background:var(--hl-green)!important;color:#fff!important;font-size:16px!important;font-weight:750;margin:0 0 12px!important}
body.het-home #como-funciona li strong{display:block;font-size:1.1rem;margin:0 0 6px;color:var(--hl-ink)!important}
body.het-home #como-funciona li p{margin:0!important;color:var(--hl-muted)!important;line-height:1.5}

/* ---------- por qué HagoElTrabajo: 3 × 2, ícono de línea ---------- */
body.het-home #porque{background:var(--hl-soft);padding-top:var(--hl-block)!important;padding-bottom:var(--hl-block)!important}
body.het-home .het-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(20px,3vw,40px)}
body.het-home .het-why-grid>div{background:none;border:0;padding:0}
body.het-home .het-why-ico{width:28px;height:28px;color:var(--hl-green);display:block;margin:0 0 10px}
body.het-home .het-why-grid strong{display:block;margin:0 0 4px;color:var(--hl-ink);font-size:1.05rem;font-weight:700}
body.het-home .het-why-grid p{margin:0;color:var(--hl-muted);line-height:1.5}

/* ---------- para proveedores y negocios ---------- */
body.het-home #providerOpportunity{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px!important;padding-top:var(--hl-block)!important;padding-bottom:var(--hl-block)!important}
body.het-home .hx-path{background:#fff!important;border:1px solid var(--hl-line)!important;border-radius:16px!important;box-shadow:none!important;padding:clamp(22px,3vw,36px)!important;margin:0!important}
body.het-home .hx-path h2{margin:0 0 10px!important;font-size:1.4rem!important}
body.het-home .hx-path p{color:var(--hl-muted);line-height:1.55;margin:0 0 20px}
body.het-home .hx-path .hx-btn{box-shadow:none!important}
body.het-home .het-manual-link{display:inline-block;margin-top:14px;font-weight:600}

/* ---------- pie ---------- */
body.het-home footer{padding-left:var(--hl-pad)!important;padding-right:var(--hl-pad)!important}
body.het-home footer>*{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}

/* ---------- tableta y celular ---------- */
@media (max-width:900px){
  body.het-home .het-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.het-home #providerOpportunity{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.het-home #como-funciona ol{grid-template-columns:1fr;gap:22px!important}
  body.het-home #como-funciona li{display:grid!important;grid-template-columns:36px 1fr;column-gap:14px}
  body.het-home #como-funciona .hx-num{grid-row:span 2;margin:0!important}
  body.het-home .het-why-grid{grid-template-columns:1fr;gap:20px}
  body.het-home .het-why-grid>div{display:grid;grid-template-columns:28px 1fr;column-gap:14px}
  body.het-home .het-why-ico{grid-row:span 2;margin:0}
}

/* ---------- mismo borde que el contenido ---------- */
body.het-home .l2-header{padding-left:var(--hl-pad)!important;padding-right:var(--hl-pad)!important}
body.het-home #categories{padding-left:0!important;padding-right:0!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
body.het-home main h2{text-align:left!important}
body.het-home .hx-section-head,body.het-home #resultSection .section-head{text-align:left!important}
@media (max-width:640px){
  body.het-home .hx-section-head,body.het-home #resultSection .section-head{display:block!important}
  body.het-home .hx-section-head>div,body.het-home #resultSection .section-head>div{width:100%;text-align:left!important;align-items:flex-start!important;justify-content:flex-start!important}
}