/* ===========================================================================
   BANDA DE MARCA — "Markenwerkzeug von BGS technic"           (2026-08-23)

   Notas de por qué está escrita así, para quien la toque mañana:

   · Todos los selectores llevan `body.wk-neu` delante. En esta portada NO
     existe el ancestro `.woocommerce` (trampa que ya mordió tres veces en este
     tema), y `body.wk-neu .wk-seccion{background:var(--wk-papel)}` tiene 0,2,0:
     una clase suelta como `.wk-seccion--hundida` (0,1,0) pierde contra ella.
     La clase del <body> es lo único garantizado en todas las páginas.

   · El bloque rompe el contenedor con `width:100vw`. El selector se escribe
     ENTERO (`.wk-home > section.wk-marca`) porque `.wk-home > section` pesa
     0,1,1 y le ganaría a `.wk-marca` (0,1,0), dejando la banda corrida ~300px
     a la izquierda en pantallas anchas. Pasó ya con los bloques de categoría.

   · Sin animación de entrada: esta banda se ve en cada visita a la portada.
     Lo único que se mueve es el botón, que ya trae su propio hover y su
     :active del sistema.
   =========================================================================== */

body.wk-neu .wk-home > section.wk-marca{
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:var(--wk-hundido);
  border-top:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  padding-block:var(--s9);
  padding-inline:var(--wk-calle);
}

/* ⚠️ CONTRASTE: --wk-tinta-3 (el gris de metadatos) está calibrado sobre el
   PAPEL (#F2F1EE), donde da 4,9:1. Esta banda va sobre el hundido (#EAE7E2),
   que es más oscuro, y ahí el mismo gris cae a 4,35:1 — por debajo de AA para
   texto pequeño, que es justo lo que lleva: etiquetas, subtítulos y el aviso
   de marca. Se reajusta SOLO dentro de la banda y SOLO en claro; en oscuro el
   hundido es #0E1218 y el gris del tema ya da 7,4:1, así que allí no se toca.
   Regla general de este tema: cuando cambia la superficie, hay que rehacer la
   cuenta del contraste — no vale heredar el token y confiar. */
html:not([data-tema="oscuro"]) body.wk-neu .wk-home > section.wk-marca{
  --wk-tinta-3:#66625E;      /* 4,9:1 sobre #EAE7E2 */
}

body.wk-neu .wk-marca__inner{
  max-width:var(--wk-ancho);
  margin-inline:auto;
  display:grid;
  /* minmax(0,…) y no `300px 1fr`: sin el 0 de mínimo, una palabra larga
     alemana ensancha la columna y descuadra la rejilla entera. */
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:var(--s8);
  align-items:center;
}

/* --- La lámina del logo ---------------------------------------------------
   Es la MISMA superficie sobre la que se apoyan las fotos del catálogo. Dos
   motivos: (1) una marca ajena metida en una lámina del sistema deja de
   parecer un parche pegado; (2) --wk-plancha se queda CLARA también en modo
   oscuro (está así a propósito, porque las fotos de BGS vienen recortadas
   sobre blanco), así que el rojo del logo conserva su contraste en los dos
   temas sin ninguna regla extra. */
body.wk-neu .wk-marca__plancha{
  background:var(--wk-plancha);
  border:1px solid var(--wk-filete);
  /* 4/3, la misma proporción que la figura del hero: la lámina del logo y la
     del producto son la misma pieza del sistema, y así la columna izquierda
     no queda como una cajita flotando en un hueco. */
  aspect-ratio:4/3;
  display:grid;
  place-items:center;
  padding:var(--s6);
}
/* ⚠️ El color va aquí, en CSS, y NO solo en los atributos del SVG: un atributo
   de presentación tiene especificidad CERO y lo pisa cualquier regla del tema.
   Es la tercera vez que este tema muerde por heredar el color de un icono. */
body.wk-neu .wk-marca__logo{
  width:min(200px,72%);
  height:auto;
  display:block;
}
body.wk-neu .wk-marca__logo path{
  fill:#E73137;          /* el rojo de marca que declara el propio archivo de BGS */
  stroke:#FFFFFF;
  stroke-width:.114;
}
/* Respaldo por si algún día falta el SVG: la marca escrita, nunca un hueco. */
body.wk-neu .wk-marca__wortmarke{
  font-family:var(--wk-cond);
  font-size:34px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#E73137;
}

/* --- Columna de texto ----------------------------------------------------- */
body.wk-neu .wk-marca__eyebrow{
  display:block;
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wk-tinta-3);
  margin-bottom:var(--s3);
}
body.wk-neu .wk-marca__titulo{
  font-family:var(--wk-cond);
  /* Caja normal: los demás títulos de sección de la portada (Kategorien,
     Bestseller) van así, y el tema pone los h2 en versalitas por defecto. */
  text-transform:none;
  /* 26px/700: el MISMO tamaño y peso que Kategorien y Bestseller — iba a
     32px/600 y era el único título de sección distinto (chequeo 2026-09-07). */
  font-size:26px;
  font-weight:700;
  line-height:1.08;
  /* Tracking al revés que el tamaño: cuanto más grande, más apretado. */
  letter-spacing:-.015em;
  color:var(--wk-tinta);
  margin:0 0 var(--s4);
}
body.wk-neu .wk-marca__lead{
  font-size:15px;
  line-height:1.62;
  color:var(--wk-tinta-2);
  /* 62 caracteres: por encima de ~75 el ojo pierde el salto de línea. */
  max-width:62ch;
  margin:0 0 var(--s6);
}

/* --- Los tres datos -------------------------------------------------------
   Misma gramática que la franja del hero: la estructura la dibujan filetes,
   no tarjetas ni aire. ⚠️ `list-style:none` NO quita el relleno que el
   navegador da a las listas — de ahí el `padding:0`, o la franja se desplaza
   respecto al titular de arriba (ya pasó y costó encontrarlo). */
body.wk-neu .wk-marca__datos{
  list-style:none;
  margin:0 0 var(--s6);
  padding:0;
  border-top:1px solid var(--wk-filete);
  border-bottom:1px solid var(--wk-filete);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.wk-neu .wk-marca__datos li{
  margin:0;
  padding:var(--s4) var(--s5);
  border-left:1px solid var(--wk-filete);
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
body.wk-neu .wk-marca__datos li:first-child{
  border-left:0;
  padding-left:0;
}
body.wk-neu .wk-marca__k{
  font-family:var(--wk-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wk-tinta-3);
}
body.wk-neu .wk-marca__v{
  font-family:var(--wk-cond);
  font-size:19px;
  font-weight:600;
  line-height:1.2;
  color:var(--wk-tinta);
  /* Cifras de ancho fijo: si no, el 1 encoge y las columnas bailan. */
  font-variant-numeric:tabular-nums;
}
body.wk-neu .wk-marca__sub{
  font-size:12px;
  line-height:1.4;
  color:var(--wk-tinta-3);
}

/* El botón de filete del sistema lleva el borde en --wk-filete-2, que sobre el
   papel ya es tenue y sobre esta banda más oscura se queda en 1,45:1: el
   control deja de leerse como control (WCAG 1.4.11 pide 3:1 para el contorno
   de un elemento de interfaz). Se refuerza SOLO aquí, sin tocar el botón
   global — en el hero, sobre el papel, sigue como está y como se aprobó.
   El selector lleva `.wk-marca` delante (0,3,0) para no depender del orden de
   carga de las hojas, que ya ha dado problemas en este tema. */
body.wk-neu .wk-marca .wk-btn--filete{
  align-self:start;
  border-color:var(--wk-tinta-3);     /* 4,9:1 en claro · 7,4:1 en oscuro */
}
body.wk-neu .wk-marca .wk-btn--filete:hover{
  border-color:var(--wk-tinta);
}

/* Aviso de titularidad de la marca. Va en el gris de metadatos, no escondido:
   es información, no letra pequeña. */
body.wk-neu .wk-marca__nota{
  font-family:var(--wk-mono);
  font-size:12px;
  line-height:1.55;
  color:var(--wk-tinta-3);
  margin:var(--s5) 0 0;
  max-width:62ch;
}

/* --- Estrecho -------------------------------------------------------------
   Los tres datos en columnas de mono no caben por debajo de ~900px: pasan a
   filas y los filetes cambian de eje (izquierda → arriba). */
@media (max-width:900px){
  body.wk-neu .wk-home > section.wk-marca{
    padding-block:var(--s8);
  }
  body.wk-neu .wk-marca__inner{
    grid-template-columns:minmax(0,1fr);
    gap:var(--s6);
  }
  body.wk-neu .wk-marca__plancha{
    aspect-ratio:auto;
    padding:var(--s5) var(--s6);
    max-width:340px;
  }
  body.wk-neu .wk-marca__logo{
    width:min(170px,60%);
  }
  body.wk-neu .wk-marca__datos{
    grid-template-columns:minmax(0,1fr);
  }
  body.wk-neu .wk-marca__datos li{
    border-left:0;
    border-top:1px solid var(--wk-filete);
    padding-inline:0;
  }
  body.wk-neu .wk-marca__datos li:first-child{
    border-top:0;
  }
}