/* ═══ Ficha de marca — /marcas/<slug> ══════════════════════════════════════
   3-sep-2026. Mario dijo que si (14:10) al antes/despues de
   `_entrega_marcas_v2/PROPUESTA.md`: logo nitido, descripcion clara y SIN las
   tarjetas de familia.

   Lo escribe SOLO `tools/gen_marcas_run.py`; ninguna pagina se toca a mano.
   La enlaza `gen_marcas.escribe(..., hoja_marca=True)` con su propio `?v=`
   (`gen_marcas.V_MARCA`): al tocar este archivo hay que subir ESE numero.

   Va en archivo propio y no al final de `ahnsa-hims.css` por dos razones
   medidas: esa hoja la estan editando otras sesiones a la vez, y un bloque
   nuevo alli obliga a subir el `?v=` de las 1,478 paginas del arbol para
   servir 49 fichas.

   Ni un color, ni una tipografia, ni un radio NUEVOS: todo son variables ya
   definidas en `css/ahnsa-hims.css` (--hm-lavado, --hm-borde, --hm-tinta-*,
   --hm-azul, --hm-r-card, --hm-fs-*). Las clases van con prefijo `.mk2-`
   propio, asi que no pisan nada del resto del sitio.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Heroe: la placa se ajusta AL LOGOTIPO ─────────────────────────────────
   La placa vieja (.hm-mk__arte--logo) era un cuadrado de 30rem con el logo
   estirado al 78 % de su ancho: medido en produccion, 344 px de CSS servidos
   con un mapa de bits de 200 px (0.58x a 1x; 0.29x en pantalla retina). De ahi
   el «borroso» que cazo Mario. Ahora el arte sale del SVG del fabricante
   cuando lo hay —un vector no tiene densidad— y la caja se acota a 20rem. */
.mk2-placa {
  display: flex; align-items: center; justify-content: center;
  background: var(--hm-blanco); border: 1px solid var(--hm-hairline);
  border-radius: var(--hm-r-card); padding: clamp(1.5rem, 4vw, 3rem);
  width: 100%; max-width: 30rem; aspect-ratio: 16 / 9;
  justify-self: center; align-self: center;
}
.mk2-placa img {
  width: 100%; max-width: 20rem;      /* 320 px */
  height: auto; max-height: 100%; object-fit: contain; display: block;
}
.mk2-kick { margin: 0 0 .625rem; color: var(--hm-tinta-3);
  text-transform: uppercase; letter-spacing: .06em; }
.mk2-origen {
  margin: 0 0 1rem; font-size: var(--hm-fs-14-16); line-height: 1.45;
  color: var(--hm-tinta-2); max-width: 46ch;
}
.mk2-origen b { color: var(--hm-tinta); font-weight: 600; }
.mk2-sep { color: var(--hm-tinta-4); padding: 0 .375rem; }

/* ── Quienes son: dos parrafos y una ficha de datos en CLARO ───────────────
   La caja marina .hm-mk__datos competia con el heroe y empujaba el texto a
   media pagina. Los MISMOS campos van aqui en hairlines, que es como se lee
   una ficha de empresa. */
.mk2-quienes { display: grid; gap: 2rem; max-width: var(--hm-max);
  margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 900px) {
  .mk2-quienes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; }
}
.mk2-prosa { max-width: 64ch; color: var(--hm-tinta-2);
  font-size: var(--hm-fs-14-16); line-height: 1.6; }
.mk2-prosa p { margin: 0 0 1rem; }
.mk2-prosa p:last-child { margin-bottom: 0; }
.mk2-prosa b { color: var(--hm-tinta); font-weight: 600; }
.mk2-ficha { align-self: start; margin: 0; }
.mk2-ficha > div {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .25rem 1rem;
  padding: .8125rem 0; border-top: 1px solid var(--hm-borde);
}
.mk2-ficha > div:last-child { border-bottom: 1px solid var(--hm-borde); }
@media (max-width: 519.9px) { .mk2-ficha > div { grid-template-columns: 1fr; } }
.mk2-ficha dt { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; }
.mk2-ficha dd { margin: 0; font-size: var(--hm-fs-14-16);
  color: var(--hm-tinta); line-height: 1.45; overflow-wrap: anywhere; }
.mk2-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.mk2-chip { display: inline-block; padding: .1875rem .625rem;
  border-radius: var(--hm-r-pill); background: var(--hm-lavado);
  font-size: var(--hm-fs-caption); color: var(--hm-tinta); }

/* ── Las familias, en TABLA. Sin tarjetas ──────────────────────────────────
   Medido en produccion sobre /marcas/yg-1: el carrusel .hm-mk__track medía
   4,364 px de ancho dentro de una ventana de 1,425 — de 11 familias se veian
   4, y las otras 7 quedaban detras de un arrastre horizontal que en escritorio
   nadie hace. La tabla las ensena todas, con la MISMA cifra y el MISMO destino
   que la tarjeta que sustituye. */
.mk2-caja { max-width: var(--hm-max); margin: 0 auto; padding-inline: 1rem; }
.mk2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mk2-tabla { width: 100%; border-collapse: collapse; }
.mk2-tabla th {
  text-align: left; padding: 0 1rem .625rem 0;
  border-bottom: 1px solid var(--hm-borde);
  font-size: var(--hm-fs-caption); font-weight: 500; color: var(--hm-tinta-3);
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.mk2-tabla td {
  padding: .875rem 1rem .875rem 0; border-bottom: 1px solid var(--hm-borde);
  font-size: var(--hm-fs-14-16); vertical-align: baseline;
}
.mk2-tabla tbody tr:hover td { background: var(--hm-hover-claro); }
.mk2-tabla .mk2-n { text-align: right; font-variant-numeric: tabular-nums;
  padding-right: 0; white-space: nowrap; }
.mk2-tabla a { color: var(--hm-tinta); text-decoration: none; font-weight: 600; }
.mk2-tabla a:hover { color: var(--hm-azul); text-decoration: underline; }
.mk2-tabla a::after { content: " \2192"; color: var(--hm-azul); font-weight: 400; }
.mk2-ej { font-variant-numeric: tabular-nums; color: var(--hm-tinta-3);
  overflow-wrap: anywhere; }
.mk2-tabla tfoot td {
  border-bottom: 0; padding-top: .875rem; color: var(--hm-tinta-3);
  font-size: var(--hm-fs-caption); text-transform: uppercase; letter-spacing: .06em;
}
/* En movil se esconde la columna del ejemplo: el codigo de fabricante es largo
   y era lo unico que empujaba la tabla a scroll horizontal. */
@media (max-width: 739.9px) { .mk2-tabla .mk2-col-ej { display: none; } }

/* ── Como comprar: dos vias, sin prometer lo que no aplica ─────────────────
   El texto lo decide `tools/marcas_cobrables.json`, que es la fuente unica de
   la lista blanca. Con la marca fuera de la lista solo se pinta una via. */
.mk2-comprar { display: grid; gap: 1.5rem; max-width: var(--hm-max);
  margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 740px) {
  .mk2-comprar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .mk2-comprar--una { grid-template-columns: minmax(0, 34rem); }
}
.mk2-via { border-top: 2px solid var(--hm-azul); padding-top: 1rem; }
.mk2-via--cot { border-top-color: var(--hm-borde); }
.mk2-via h3 { margin: 0 0 .5rem; font-size: var(--hm-fs-14-16); font-weight: 600;
  color: var(--hm-tinta); }
.mk2-via p { margin: 0; font-size: var(--hm-fs-14-16); line-height: 1.55;
  color: var(--hm-tinta-2); }

/* ── Datos tecnicos sin tarjetas: listas con hairline ──────────────────────*/
.mk2-tec { display: grid; gap: 2rem; max-width: var(--hm-max);
  margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 900px) {
  .mk2-tec { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 3.5rem; }
}
.mk2-tec h3 { margin: 0 0 .875rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--hm-borde);
  font-size: var(--hm-fs-caption); font-weight: 500; color: var(--hm-tinta-3);
  text-transform: uppercase; letter-spacing: .06em; }
.mk2-lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .375rem; }
.mk2-lista li { padding: .1875rem .625rem; border-radius: var(--hm-r-pill);
  background: var(--hm-lavado); font-size: var(--hm-fs-caption);
  color: var(--hm-tinta); overflow-wrap: anywhere; }
.mk2-nota { max-width: var(--hm-max); margin: 1.75rem auto 0;
  padding-inline: 1rem; font-size: var(--hm-fs-caption); line-height: 1.55;
  color: var(--hm-tinta-3); }
.mk2-nota b { color: var(--hm-tinta-2); }

/* ── v2 (6-sep, ux-movil; Mario 23:40): «Como esta organizado» ─────────────
   Desde que TODAS las filas de la tabla van al listado filtrado —que es lo que
   el usuario espera al picar—, este bloque es el UNICO enlace entrante de las
   subpaginas de marca. No es decoracion: sin el quedan huerfanas, que es el
   fallo de 67 paginas del 23-ago que mide audit_enlaces.py.
   Los enlaces son de 44 px de alto porque son navegacion de verdad y se tocan
   con el dedo; las pildoras .mk2-chip de arriba miden 24 y son ETIQUETAS, que
   no se tocan. */
.mk2-guias { margin-top: 2rem; }
.mk2-guias-t { font-size: var(--hm-fs-h-m); font-weight: 600; color: var(--hm-tinta);
  margin: 0 0 .25rem; }
.mk2-guias-p { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3);
  margin: 0 0 .875rem; max-width: 62ch; }
.mk2-guias-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.mk2-guia { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; min-height: 44px; padding: .5rem .875rem;
  border: 1px solid var(--hm-borde); border-radius: var(--hm-r-card);
  color: var(--hm-tinta); text-decoration: none;
  transition: background-color 200ms linear, border-color 200ms linear; }
.mk2-guia:hover { background: var(--hm-hover-claro); border-color: var(--hm-azul); }
.mk2-guia-t { font-size: var(--hm-fs-14-16); font-weight: 600; }
.mk2-guia-n { font-size: var(--hm-fs-caption); color: var(--hm-tinta-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── v2 (7-sep, ux-movil; Mario 6-sep 22:26): «Encuentra tu producto» ──────
   La tabla de arriba lleva de la MARCA a la FAMILIA; esto lleva de la familia al
   PRODUCTO. Cada opcion es un enlace al listado ya filtrado, y por eso mide 44 px
   de alto: se toca con el dedo.
   Va en la MISMA v2 que el bloque de guias porque la v2 no ha salido: dos bumps
   sin desplegar gastan dos invalidaciones de cache para un solo cambio visible. */
.mk2-bq { margin-top: .5rem; display: grid; gap: 1.25rem; }
.mk2-bq-fam { font-size: var(--hm-fs-14-16); font-weight: 700; color: var(--hm-tinta);
  margin: 0 0 .5rem; }
.mk2-bq-fam span { font-weight: 500; color: var(--hm-tinta-3); }
.mk2-bq-fam span::before { content: '· '; }
.mk2-ops { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk2-op { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .375rem .875rem; border: 1px solid var(--hm-borde);
  border-radius: var(--hm-r-pill); background: var(--hm-blanco);
  color: var(--hm-tinta); text-decoration: none; font-size: var(--hm-fs-14-16);
  font-weight: 600; white-space: nowrap;
  transition: background-color 200ms linear, border-color 200ms linear; }
@media (hover: hover) { .mk2-op:hover { background: var(--hm-hover-claro);
  border-color: var(--hm-azul); } }
.mk2-op__n { font-size: var(--hm-fs-caption); font-weight: 500;
  color: var(--hm-tinta-3); font-variant-numeric: tabular-nums; }