/* Deli Express — tema CLARO sobre el motor (catalog.css).
   El motor aporta layout/carrito/variantes/promos/mapa; aquí va la identidad:
   paleta clara (texto oscuro sobre blanco), fuente Sora y hero a la izquierda.
   Colores de marca en craft-vars (index.html) → editables/sincronizables. */
:root{
  --bg:#f4f2f7;
  --bg-2:#ffffff;
  --surface:rgba(0,0,0,.035);
  --surface-2:rgba(0,0,0,.055);
  --border:rgba(0,0,0,.09);
  --border-2:rgba(0,0,0,.16);
  --text:#1a1720;
  --text-soft:#5f5866;
  --text-dim:#948d9c;
  --font-display:'Sora',system-ui,sans-serif;
}
body{font-family:'Sora',system-ui,sans-serif}

/* Titulares Sora bold sin mayúsculas (el motor usa display uppercase por defecto) */
.hero h1,.cat-header,.brand-name,.modal-name{
  text-transform:none;letter-spacing:-.02em;font-weight:800;
}
.hero h1{font-size:clamp(28px,6vw,40px);line-height:1.08}
.hero h1 .hl{background:linear-gradient(120deg,var(--accent),var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Hero a la izquierda */
.hero{text-align:left}
.hero-top{justify-content:space-between}
.brand{flex-direction:row;align-items:center;gap:12px;text-align:left}
.brand-logo{height:84px}
.brand-sub{font-size:12px;color:var(--text-soft);font-weight:500}

/* Superficies oscuras hardcodeadas del motor → claras */
.bottom-nav{background:rgba(255,255,255,.82)}
.search-box input:focus,.form-field input:focus,.form-field textarea:focus{background:rgba(0,0,0,.05)}