/* ═══════════════════════════════════════════════════════════════════════
   DISMER — identidad

   Toda la estructura viene de `themes/base`. Aquí sólo la marca: el azul
   profundo y el celeste del logo DISMER.CL («Brillante elección»), Poppins
   para los títulos e Inter para el texto. Es una distribuidora de aseo que
   vende a empresas y a hogares: la portada se lee clara y ordenada, sin
   tono de moda (títulos en caja normal, botones sin mayúsculas).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --k-ink:#0F2347;              /* azul tinta: texto y estructura */
  --k-ink-soft:#33476B;
  --k-muted:#5B6B85;            /* 5,4:1 sobre blanco */
  --k-bg:#FFFFFF;
  --k-surface:#F1F6FC;          /* celeste muy claro, como el fondo de su sitio */
  --k-warm:#F5F9FD;
  --k-line:#DDE7F2;

  --k-action:#0C4E9D;           /* azul DISMER */
  --k-action-hover:#062B79;
  --k-action-ink:#FFFFFF;       /* 7,9:1 */
  --k-link:#0C4E9D;
  --k-sale:#C62828;
  --k-ok:#1B7F45;
  --k-announce-bg:#062B79;
  --k-announce-ink:#FFFFFF;

  --k-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --k-font-display:'Poppins','Inter',system-ui,sans-serif;
  --k-radius:8px;
  --k-radius-lg:16px;
  --k-titulos:none;
  --k-cols:4;

  --dm-azul:#062B79;
  --dm-celeste:#02A9D6;
  --dm-degradado:linear-gradient(90deg,#062B79 0%,#0C4E9D 55%,#02A9D6 100%);
}

body{ background:var(--k-bg); }
h1,h2,h3,h4,.section-title{ letter-spacing:-.015em; }

/* Botones en caja normal: es una tienda de reposición, no una pasarela */
.btn{ text-transform:none; letter-spacing:0; font-weight:600; border-radius:999px; }
.btn-outline{ border-color:var(--k-action); color:var(--k-action); }
.btn-outline:hover{ background:var(--k-action); color:#fff; }

/* ── Cabecera ──────────────────────────────────────────────────────── */
.site-header{ border-bottom:3px solid transparent; border-image:var(--dm-degradado) 1; }
.header-logo .logo-img{ max-height:40px; width:auto; }
.nav-link{ font-weight:600; letter-spacing:0; text-transform:none; font-size:.92rem; }
.header-nav{ gap:1.4rem; }
.announcement-bar{ background:var(--dm-degradado); font-weight:500; }

/* ── Hero: texto sobre el azul profundo, bodegón a la derecha ──────── */
.hero{ min-height:clamp(380px,60vh,560px); align-items:center; background:var(--dm-azul); }
.hero-img{ object-position:right center; }
.hero-overlay{ background:linear-gradient(90deg,rgba(6,43,121,.92) 0%,rgba(6,43,121,.55) 45%,rgba(6,43,121,0) 70%); }
.hero-content{ width:100%; }
.hero-content > *{ max-width:600px; }
.hero-title{ font-size:clamp(2rem,4.2vw,3.3rem); }
.hero-subtitle{ max-width:46ch; }
.hero-eyebrow{ background:var(--dm-celeste); color:#04224F; border-radius:999px; padding:.3rem .8rem; letter-spacing:.08em; }
.hero-title{ font-weight:700; line-height:1.02; letter-spacing:-.03em; }
.hero .btn-primary,.hero .btn:not(.btn-outline){ background:#fff; color:var(--dm-azul); }
.hero .btn-primary:hover{ background:var(--dm-celeste); color:#04224F; }
@media (max-width:899px){
  .hero-img{ opacity:.45; object-position:75% center; }
  .hero-overlay{ background:linear-gradient(180deg,rgba(6,43,121,.55),rgba(6,43,121,.9)); }
}

.marquee-strip{ background:var(--dm-celeste); }
.marquee-track{ color:#04224F; }

/* ── Categorías: las imágenes son claras; el título va en una pastilla ── */
/* Las imágenes de categoría son apaisadas (4:3): cuatro por fila en escritorio */
.collection-card{ aspect-ratio:4/3; }
@media (min-width:900px){ .collections-grid{ grid-template-columns:repeat(4,1fr); gap:1rem; } }
.collection-card{ border-radius:var(--k-radius-lg); background:var(--k-surface); }
.collection-card-img{ object-fit:cover; }
.collection-card-overlay{ background:none; padding:.8rem; }
.collection-card-title,.collection-card-count{ text-shadow:none; }
.collection-card-title{ display:inline-block; background:rgba(255,255,255,.94); color:var(--dm-azul); padding:.35rem .8rem;
  border-radius:999px; font-size:.95rem; letter-spacing:0; box-shadow:0 2px 10px rgba(6,43,121,.12); }
.collection-card-count{ display:block; color:var(--k-ink-soft); margin-top:.35rem; padding-left:.4rem; }
.collections-strip.is-tiles .collection-card-title{ font-size:clamp(.95rem,2vw,1.15rem); }

/* ── Tarjeta de producto ───────────────────────────────────────────── */
.product-card-image-wrap{ border-radius:var(--k-radius-lg); }
.product-card-image-wrap img{ object-fit:contain; }
.price-current{ color:var(--dm-azul); font-weight:700; }
/* Sin foto todavía: el isotipo de la marca en vez de un rectángulo vacío */
.product-card-placeholder,.pg-empty{
  background:var(--k-surface) url('/media/dismer/favicon.png') center 42%/34% no-repeat;
  opacity:.9;
}
.pg-empty svg{ display:none; }

/* ── Banda de marca ────────────────────────────────────────────────── */
.k-story{ background-color:var(--dm-azul); }
.k-story-veil{ background:linear-gradient(90deg,rgba(6,43,121,.94),rgba(12,78,157,.86)); }
.k-story-eyebrow{ color:var(--dm-celeste); }

/* ── Pie: azul profundo con el logo en blanco ──────────────────────── */
.site-footer{ background:#04224F; }
.footer-logo{ display:block; width:210px; height:43px; background:url('/media/dismer/logo-blanco.png') left center/contain no-repeat;
  color:transparent; font-size:0; }
.footer-newsletter-title{ font-family:var(--k-font-display); }

/* ── Bloque «Nuestras marcas» y franja B2B (home.extra_html y páginas) ── */
.dm-marcas{ padding:2.5rem 0; text-align:center; }
.dm-marcas h2{ font-size:clamp(1.3rem,3vw,1.7rem); margin-bottom:.3rem; }
.dm-marcas p{ color:var(--k-muted); margin-bottom:1.4rem; }
.dm-marcas-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.dm-marcas-grid a{ display:flex; align-items:center; justify-content:center; width:170px; height:120px; padding:1rem;
  background:#fff; border:1px solid var(--k-line); border-radius:var(--k-radius-lg); transition:box-shadow .2s, transform .2s; }
.dm-marcas-grid a:hover{ box-shadow:0 10px 24px rgba(6,43,121,.12); transform:translateY(-2px); }
.dm-marcas-grid img{ max-height:88px; width:auto; object-fit:contain; }

.dm-eco{ display:flex; gap:1rem; align-items:center; justify-content:center; text-align:left; background:#EAF7EF; color:#14532D;
  border-radius:var(--k-radius-lg); padding:1rem 1.4rem; margin:0 auto 2.5rem; max-width:900px; font-size:.95rem; }
.dm-eco svg{ flex:0 0 28px; color:#1B7F45; }

.dm-b2b{ display:grid; gap:1rem; }
.dm-b2b-card{ background:var(--k-surface); border-radius:var(--k-radius-lg); padding:1.2rem 1.4rem; }
.dm-b2b-card h3{ color:var(--dm-azul); font-size:1.05rem; margin-bottom:.3rem; }
@media (min-width:700px){ .dm-b2b{ grid-template-columns:repeat(3,1fr); } }

.rich-text .dm-btn{ display:inline-block; background:var(--k-action); color:#fff !important; padding:.7rem 1.4rem; border-radius:999px;
  font-weight:600; text-decoration:none; }
.rich-text .dm-btn-wa{ background:#25D366; color:#063B1E !important; }