/* DIEMSAC — ajustes de marca sobre el ui-kit (no toca base.css) */
.lu-nav__logo{display:inline-flex;align-items:center;gap:.55rem}
.lu-logo-icon{height:32px;width:auto;display:block}
/* Antes era un <img> con texto pintado en blanco (heredado del diseño oscuro v1): sobre el
   fondo claro v2 quedaba invisible. Ahora es texto real, hereda color del contenedor — se ve
   oscuro en el header (fondo claro) y blanco en el footer oscuro sin depender de un PNG. */
.lu-logo-word{font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-0.01em;color:var(--text);line-height:1}
.lu-footer__brand .lu-nav__logo{margin-bottom:var(--space-3)}

/* Footer oscuro: todo el resto del sitio queda claro/denso (inmersión baja, validado contra
   competencia real en _marca/competencia.md — ver la lección "DIEMSAC, el fallo de rubro"),
   pero el pie de página SÍ lleva fondo casi negro. Da el contraste blanco/negro de marca que
   pidió Franco sin volver a la estética oscura general que ya se descartó por no vender. */
.lu-footer{background:#111417;border-top-color:transparent}
.lu-footer .lu-logo-word{color:#fff}
.lu-footer__brand p{color:#9CA3AF}
.lu-footer h3,.lu-footer h4{color:#6B7280}
.lu-footer ul a{color:#D1D5DB} .lu-footer ul a:hover{color:#fff}
.lu-footer__bottom{border-top-color:rgba(255,255,255,.12);color:#6B7280}

/* CTA final oscuro: mismo criterio que el footer — un bloque negro real, no el degradado
   arcoíris genérico del ui-kit (amarillo/cian/violeta girando, muy "SaaS"). Da el contraste
   blanco/negro de marca en un punto de decisión (cotizar), no solo al final del scroll. */
.lu-cta{background:#14100A;border-color:transparent}
.lu-cta::before{background:conic-gradient(from 180deg at 50% 50%,transparent 0deg,rgba(245,166,35,.35) 70deg,transparent 140deg,rgba(29,78,216,.3) 220deg,transparent 300deg);filter:blur(50px)}
.lu-cta .lu-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.lu-cta h2,.lu-cta p{color:#fff}
.lu-cta .lu-lead{color:#C7CBD1}
.lu-cta .lu-btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.lu-cta .lu-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* "Por qué DIEMSAC" (4 cards de feature, no es catálogo — sí debe caber en 1 viewport por la
   regla ★ de loop-calidad): en móvil, con 1 columna y padding grande, las 4 cards apiladas
   pasaban de 1400px. Se compacta el padding/gap y se fuerza 2 columnas desde 480px. */
#why-diemsac .lu-card{padding:var(--space-5);gap:.5rem}
#why-diemsac .lu-card__icon{width:42px;height:42px}
#why-diemsac .lu-card__icon svg{width:20px;height:20px}
#why-diemsac .lu-card__title{font-size:1rem}
#why-diemsac .lu-card__text{font-size:.85rem;line-height:1.4}
@media (max-width:480px){#why-diemsac .lu-grid--4{grid-template-columns:1fr 1fr;gap:var(--space-3)}}

/* Hero y "Cómo comprar" apenas se pasaban del viewport móvil (regla ★): recorte de padding
   vertical y del stack de fotos flotantes, sin tocar el desktop. */
@media (max-width:480px){
  #hero{padding-block:var(--space-8) !important}
  .dm-hero-products{min-height:220px}
  #hero .lu-hero__inner{gap:var(--space-6)}
  .lu-steps{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  /* Form de contacto: Nombre/Celular se quedan lado a lado (el ui-kit los apila <600px,
     aquí sobra alto) y se recorta el padding de card + el textarea. */
  #contacto .lu-form--2{grid-template-columns:1fr 1fr;gap:var(--space-3)}
  #contacto .lu-form{padding:var(--space-5);gap:var(--space-3)}
  #contacto textarea.lu-input{min-height:80px}
  #contacto .lu-input{padding:.65rem .85rem}
}

/* Chips de marcas distribuidas: fotos reales con fondos distintos, se unifican con
   escala de grises + superficie oscura en vez de cuadro blanco suelto. */
.lu-brand-chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:.6rem 1rem;display:flex;align-items:center}
.lu-brand-chip img{height:24px;width:auto;max-width:100px;object-fit:contain;filter:grayscale(1) brightness(1.3) contrast(.9);opacity:.7;transition:filter var(--dur),opacity var(--dur)}
.lu-brand-chip:hover{border-color:var(--border-strong)}
.lu-brand-chip:hover img{filter:none;opacity:1}

/* Hero: 4 productos REALES del catálogo (nombre + precio con IGV), no íconos genéricos con
   un precio flotando. Card blanca (contraste fuerte contra el hero negro) con foto/ícono de
   categoría arriba y ficha de producto abajo — la "luz" del rubro es el chip ámbar del precio.
   Antes era un collage con `position:absolute` + top/bottom% mezclados: a ciertos anchos las
   cards se superponían y tapaban el precio de la vecina (Franco, bug real en producción). Se
   cambia a grid 2×2 en TODAS las resoluciones — por construcción una card no puede invadir la
   celda de otra — y la rotación queda solo como transform decorativo dentro de su propia celda
   (no mueve el layout, no puede generar solape). */
.dm-hero-products{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;width:100%}
.dm-hp{border-radius:var(--radius-l);overflow:hidden;background:#fff;box-shadow:var(--shadow-3);border:1px solid rgba(255,255,255,.15);transition:transform .35s var(--ease-out);will-change:transform}
.dm-hp img{width:100%;height:130px;object-fit:cover;display:block}
.dm-hp__body{padding:.6rem .7rem .7rem}
.dm-hp__name{display:block;font-size:.72rem;font-weight:700;color:var(--text);line-height:1.25;margin-bottom:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-hp__price{display:inline-block;background:var(--primary);color:var(--primary-ink);font-family:var(--font-display);font-weight:800;font-size:.8rem;padding:.15rem .55rem;border-radius:var(--radius-pill)}
.dm-hp__price small{font-weight:600;font-size:.6rem;opacity:.75;margin-left:.15rem}
.dm-hp:hover{transform:scale(1.05) rotate(0deg) !important;z-index:2;position:relative}
.dm-hp--1{transform:rotate(-3deg)}
.dm-hp--2{transform:rotate(2deg);margin-top:1.4rem}
.dm-hp--3{transform:rotate(2deg);margin-top:-.8rem}
.dm-hp--4{transform:rotate(-3deg)}
@media (max-width:640px){
  .dm-hero-products{gap:.6rem;margin-top:var(--space-4)}
  .dm-hp{transform:none !important;margin:0 !important}
  .dm-hp img{height:90px}
}

/* ============================================================
   Identidad DIEMSAC: ferretería eléctrica, no agencia tech.
   Motivos: plano técnico (grilla de blueprint), franja de
   seguridad ámbar/negro, líneas de circuito con corriente.
   ============================================================ */
body{
  background-image:
    linear-gradient(rgba(245,166,35,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

/* Badges de oferta/destacado: antes llevaban una franja rayada (hazard stripe) diagonal que
   Franco vio "como un error de render" — se limpia a badge sólido ámbar, legible y sin ruido. */
.dm-hazard,
.lu-card__badge,
.lu-pill--primary.lu-card__badge{
  background:var(--primary) !important;
  color:var(--primary-ink) !important;
  border-color:transparent !important;
  text-shadow:none;
  font-weight:800;
}

/* Eyebrow con "corchete" de plano técnico */
.lu-eyebrow{position:relative}
.lu-eyebrow::before{content:'⌐';margin-right:.4em;color:var(--primary);font-weight:800}

/* Líneas de circuito decorativas en el hero: trazos con "corriente" animada */
.dm-circuit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.dm-circuit path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:6 10;animation:dm-current 3.5s linear infinite}
.dm-circuit circle{fill:var(--primary)}
.dm-circuit .dm-c2{stroke:var(--primary);animation-duration:4.5s;animation-direction:reverse}
@keyframes dm-current{to{stroke-dashoffset:-160}}
@media (prefers-reduced-motion:reduce){.dm-circuit path{animation:none}}

/* Buscador del nav */
.lu-nav__search{flex:1;max-width:340px;display:flex;position:relative}
.lu-nav__search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.55rem 2.4rem .55rem 1.1rem;color:var(--text);font-size:.85rem;font-family:var(--font-body)}
.lu-nav__search input::placeholder{color:var(--text-3)}
.lu-nav__search input:focus{outline:none;border-color:var(--border-strong)}
.lu-nav__search button{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);width:1.9rem;height:1.9rem;border-radius:50%;border:none;background:var(--primary);color:var(--primary-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lu-nav__search button svg{width:15px;height:15px}
@media (max-width:900px){.lu-nav__search{display:none}}

/* Nav negro real: es la franja "estructural fuerte" de marca (Franco), no un header claro.
   El buscador queda blanco a propósito (mismo truco que el resto del sitio: un campo claro
   sobre fondo oscuro se ve y no compite en color con el ámbar de marca). */
.lu-nav{background:var(--ink)}
.lu-nav.is-scrolled{background:color-mix(in srgb,var(--ink) 92%,transparent);border-bottom-color:rgba(255,255,255,.08)}
.lu-nav__links{background:rgba(255,255,255,.06)}
.lu-nav__links a{color:#B8BCC2}
.lu-nav__links a:hover,.lu-nav__links a.is-active{color:#fff;background:rgba(255,255,255,.1)}
.lu-nav__logo .lu-logo-word{color:#fff}
.lu-nav__cta .lu-btn--ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.lu-nav__cta .lu-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.lu-nav__burger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
.lu-nav__burger span{background:#fff}
@media (max-width:900px){.lu-nav.is-open .lu-nav__links{background:var(--ink);border-color:rgba(255,255,255,.12)}}

/* Barra de confianza estilo retail (envío, pago, garantía, IGV): se funde con el nav en una
   sola franja negra (antes clara con íconos azules — ahora íconos ámbar, texto claro). */
.dm-trustbar{background:var(--graphite);border-bottom:1px solid rgba(255,255,255,.08)}
.dm-trustbar__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);padding-block:var(--space-4)}
.dm-trustbar__item{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:#B8BCC2}
.dm-trustbar__item svg{width:20px;height:20px;color:var(--primary);flex-shrink:0}
.dm-trustbar__item strong{color:#fff;font-weight:700}
@media (max-width:900px){.dm-trustbar__inner{grid-template-columns:repeat(2,1fr)}}

/* Hero negro real: el fondo de sección más "a sangre" del home, donde el ámbar de los
   productos y del CTA brilla de verdad (el código visual del rubro que pidió Franco). */
#hero{background:var(--ink)}
#hero .lu-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
#hero .lu-hero-title{color:#fff}
#hero .lu-lead{color:#A8ADB4}
#hero .lu-btn--glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
#hero .lu-btn--glass:hover{background:rgba(255,255,255,.14)}
/* Palabra destacada del H1 = ámbar sólido (pedido explícito de Franco), no el degradado
   texto→primario del ui-kit (pensado para fondo claro; ilegible sobre el hero negro). */
#hero .lu-grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--primary)}

/* Filtros de tienda (sidebar estilo retail) */
.dm-shop{display:grid;grid-template-columns:240px 1fr;gap:var(--space-8);align-items:start}
.dm-filters{position:sticky;top:calc(var(--space-16) + 20px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);padding:var(--space-5)}
.dm-filters h3{font-family:var(--font-display);font-size:.95rem;margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border)}
.dm-filters h3:not(:first-child){margin-top:var(--space-5)}
/* Antes el texto de la categoría era un nodo de texto suelto en el flex: sin `min-width:0`
   se niega a encogerse y empuja el contador fuera de la caja del sidebar ("3"/"13" cortados,
   Franco). Ahora va en su propio span que sí puede encogerse/partirse en 2 líneas. */
.dm-filter-opt{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;font-size:.87rem;color:var(--text-2);cursor:pointer}
.dm-filter-opt:hover{color:var(--text)}
.dm-filter-opt input{accent-color:var(--primary);flex-shrink:0}
.dm-filter-opt__label{flex:1;min-width:0}
.dm-filter-opt .dm-count{flex-shrink:0;color:var(--text-3);font-size:.78rem}
.dm-price-range{display:flex;gap:.5rem;align-items:center}
.dm-price-range input{width:0;flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-s);padding:.4rem .5rem;color:var(--text);font-size:.82rem}
.dm-filters .lu-btn{margin-top:var(--space-3)}
.dm-shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}
.dm-shop-toolbar select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:.5rem .8rem;color:var(--text);font-size:.85rem}
@media (max-width:820px){.dm-shop{grid-template-columns:1fr}.dm-filters{position:static}}

/* Migas de pan */
.dm-breadcrumb{font-size:.82rem;color:var(--text-3);margin-bottom:var(--space-4)}
.dm-breadcrumb a{color:var(--text-3)}
.dm-breadcrumb a:hover{color:var(--primary)}

/* Íconos de pago en footer */
.dm-pay-icons{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--space-3)}
.dm-pay-icons span{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:.3rem .6rem;font-size:.72rem;font-weight:700;color:var(--text-2)}

/* ============================================================
   Anatomía de card de producto (skill ecommerce-que-vende):
   stock/disponibilidad + dato técnico corto, siempre visibles
   sin hover (compra práctica = inmersión baja).
   ============================================================ */
/* Stock y dato técnico van en la MISMA fila (antes eran 2 filas, sobraba alto de card) —
   grid de 2 columnas en el body, y estos dos elementos se acomodan en la misma fila por
   auto-placement de CSS Grid (col1 libre para dm-stock, col2 libre para dm-spec). */
.lu-product__body{grid-template-columns:1fr auto}
.lu-product__cat,.lu-product__name,.lu-product__price,.lu-product__actions{grid-column:1/-1}
.dm-stock{grid-column:1;display:flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:600}
.dm-stock--in{color:var(--success)}
.dm-stock--out{color:var(--danger)}
.dm-spec{grid-column:2;justify-self:end;font-size:.75rem;color:var(--text-3);align-self:center}

/* Categorías del home: foto real de la categoría, no ícono decorativo */
.dm-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.dm-cat-card{display:block;border-radius:var(--radius-l);overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-1);transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.dm-cat-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.dm-cat-card__media{aspect-ratio:4/3;background:var(--bg-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.dm-cat-card__media img{width:100%;height:100%;object-fit:cover}
.dm-cat-card__body{padding:var(--space-4)}
.dm-cat-card__body h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.2rem}
.dm-cat-card__body span{font-size:.82rem;color:var(--text-3)}
@media (max-width:900px){.dm-cat-grid{grid-template-columns:repeat(2,1fr)}}