/* ==========================================================================
   PLOMART · componentes del design system, portados a CSS/HTML servido.

   El design system vive como componentes React en el proyecto de Claude Design.
   Aquí están los mismos componentes reescritos como clases + partials de Django,
   porque el sitio se sirve renderizado en servidor (SEO local y Lighthouse ≥95
   en móvil son goals de F6, y un bundle de React no ayuda a ninguno de los dos).

   Regla que no se rompe: **todo valor sale de tokens/**. Si aquí aparece un
   color, una medida o un tiempo escrito a mano, es un bug.

   Prefijo `plm-`. Un bloque por componente, en el orden del índice del DS.
   ========================================================================== */

/* `tokens/base.css` es la base mínima del DS y no trae reset de caja. Sin esto,
   cualquier control con `width:100%` más padding y borde se sale de su contenedor
   (se vio primero en el botón de bloque de /mayoreo). */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` tiene que ganarle a cualquier `display` de clase. Sin esto, un
   `<form class="fm-layout" hidden>` seguía visible porque `.fm-layout{display:grid}`
   pesa más que el `display:none` del user-agent. El JS usa `hidden` para todo lo
   que se muestra u oculta, así que esto no es cosmético. */
[hidden] { display: none !important; }

/* --- Utilidades de layout -------------------------------------------------- */
.plm-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.plm-sec { padding: var(--sp-9) 0; }
.plm-sec--alt { background: var(--surface-alt); }
.plm-sec--ink { background: var(--surface-inverse); color: var(--text-inverse); }
.plm-tabular { font-variant-numeric: var(--numeric-tabular); }
.plm-solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 767px) {
  .plm-wrap { padding: 0 var(--gutter-mobile); }
  .plm-sec { padding: var(--sp-7) 0; }
}

/* Eyebrow: overline en caps con el triángulo brass del motivo A.
   Sobre crema usa --brass-dark-deep (AA 5.0:1); sobre ink, --brass. */
.plm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--type-overline);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brass-dark);
}
.plm-eyebrow::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--brass);
}
.plm-eyebrow--crema { color: var(--brass-dark-deep); }
.plm-eyebrow--crema::before { border-bottom-color: var(--brass-dark); }
.plm-eyebrow--ink { color: var(--text-accent-on-dark); }

.plm-sec-head { margin-bottom: 28px; }
.plm-sec-head h2, .plm-sec-head h3 { margin: 0; }
.plm-banda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* --- Icon ----------------------------------------------------------------- */
/* Sustitución documentada: Lucide (trazo 1.75, caps redondeados). Ver el
   template tag `icono` — el SVG se inserta en línea, sin icon font. */
.plm-icon {
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.plm-icon--fill { fill: currentColor; stroke: none; }
.plm-icon-deco { color: var(--accent-deco); }

/* --- Button --------------------------------------------------------------- */
.plm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  background: var(--ink);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.plm-btn:hover { background: var(--ink-2); color: var(--text-inverse); }
.plm-btn:active { transform: translateY(1px); }
.plm-btn[disabled], .plm-btn[aria-disabled='true'] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
.plm-btn--lg { min-height: 52px; padding: 0 var(--sp-6); font-size: var(--type-body); }
.plm-btn--sm { min-height: 36px; padding: 0 var(--sp-4); font-size: var(--type-caption); }
.plm-btn--bloque { width: 100%; }

.plm-btn--secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-body);
}
.plm-btn--secondary:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.plm-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-accent);
  padding: 0 var(--sp-2);
}
.plm-btn--ghost:hover {
  background: transparent;
  color: var(--brass-dark-deep);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-underline-offset: 3px;
}

/* inverse: sobre ink. El brass sí es texto sobre ink (8.6:1). */
.plm-btn--inverse { background: var(--brass); color: var(--ink); }
.plm-btn--inverse:hover { background: var(--brass-dark); color: var(--text-inverse); }
.plm-btn--secondary.plm-btn--inverse {
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--text-inverse);
}
.plm-btn--secondary.plm-btn--inverse:hover {
  border-color: var(--brass);
  color: var(--text-accent-on-dark);
}

.plm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.plm-iconbtn:hover { border-color: var(--line-strong); background: var(--cream-2); }
.plm-iconbtn--ink {
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--text-inverse);
}
.plm-iconbtn--ink:hover { background: var(--ink-2); border-color: var(--brass); }

/* --- Formularios (Field, Input, Select, Textarea, Checkbox) --------------- */
.plm-field { display: block; margin-bottom: var(--sp-5); }
.plm-field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
}
.plm-field__opcional {
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.plm-field__hint {
  margin: var(--sp-2) 0 0;
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
/* Los errores explican qué pasó y cómo corregirlo, y solo aparecen después del
   primer intento de envío (lo controla la vista, no el CSS). */
.plm-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  font-size: var(--type-caption);
  color: var(--error);
}

.plm-input, .plm-select, .plm-textarea {
  width: 100%;
  min-height: var(--target-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease-out);
  box-sizing: border-box;
}
.plm-textarea { padding: var(--sp-3); min-height: 120px; resize: vertical; }
.plm-input:hover, .plm-select:hover, .plm-textarea:hover { border-color: var(--ink); }
.plm-input::placeholder, .plm-textarea::placeholder { color: var(--text-secondary); }
.plm-input[aria-invalid='true'], .plm-textarea[aria-invalid='true'],
.plm-select[aria-invalid='true'] { border-color: var(--error); }
.plm-select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
                    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.plm-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 34px;
  padding: var(--sp-1) 0;
  font-size: var(--type-body-sm);
  cursor: pointer;
}
.plm-check input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out);
}
.plm-check:hover input { border-color: var(--ink); }
.plm-check input:checked {
  background: var(--ink);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Cantidad: stepper de 44px para poder usarlo en obra, con el pulgar. */
.plm-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--surface-card);
}
.plm-qty button {
  width: var(--target-min);
  min-height: var(--target-min);
  border: 0;
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-1) var(--ease-out);
}
.plm-qty button:hover { background: var(--cream-2); }
.plm-qty input {
  width: 52px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  font-variant-numeric: var(--numeric-tabular);
  color: var(--text-body);
  background: transparent;
  -moz-appearance: textfield;
}
.plm-qty input::-webkit-outer-spin-button,
.plm-qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* --- Badge ---------------------------------------------------------------- */
.plm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}
.plm-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.plm-badge--existencia { color: var(--ok); border-color: rgba(46, 107, 79, .3); }
.plm-badge--pedido { color: var(--brass-dark-deep); border-color: rgba(138, 106, 53, .34); }
.plm-badge--neutral::before { display: none; }
.plm-badge--ink {
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--text-inverse);
}

/* Chip de categoría sobre la card (comentario 2 de Chala: más color y vida).
   No forkea ProductCard: vive en el contenedor que la envuelve. */
.plm-chip-cat {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-card);
  box-shadow: var(--shadow-1);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--graphite);
  pointer-events: none;
}
.plm-chip-cat .plm-icon { color: var(--brass-dark); }

/* --- ProductCard ---------------------------------------------------------- */
.plm-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  transition: box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.plm-pcard:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.plm-pcard__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
}
/* Foto a sangre: las fotos de ambiente son 4:3 o 16:9 recortadas al cuadro. */
.plm-pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--ease-out);
}
.plm-pcard:hover .plm-pcard__media img { transform: scale(1.02); }
/* Foto de producto (la de BIND): se enseña entera, sin recortar, sobre
   blanco. Las que suben en BIND no siempre vienen cuadradas, y recortarlas
   corta la pieza. */
.plm-pcard__media img.plm-foto,
.ct-galeria img.plm-foto { object-fit: contain; background: #fff; padding: 6%; }
.plm-pcard__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: var(--sp-4);
}
.plm-pcard__marca {
  font-size: var(--type-overline);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brass-dark);
}
.plm-pcard__nombre {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-h5);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  text-wrap: pretty;
}
.plm-pcard__nombre a { text-decoration: none; color: inherit; }
.plm-pcard__nombre a:hover { color: var(--brass-dark); }
.plm-pcard__attr { font-size: var(--type-body-sm); color: var(--text-secondary); }
.plm-pcard__sku {
  font-size: var(--type-caption);
  color: var(--text-secondary);
  font-variant-numeric: var(--numeric-tabular);
}
.plm-pcard__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--sp-3);
}
/* `flex: 1 1 100%` en vez de `min-width: 100%`: el min-width contaba como ancho
   mínimo de la card y en 360px empujaba la rejilla fuera de la pantalla. */
.plm-pcard__cta { flex: 1 1 100%; min-width: 0; }
/* Slot de precio/existencia de Fase 2: existe en el layout y no publica números. */
.plm-pcard__precio {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--cream-2);
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
/* Marcador crema con la «A», para cuando no hay fotografía.
   Iba al 55 % de opacidad y con el rótulo «Fotografía pendiente» debajo. Se
   cambió el 2026-09-19: a esa opacidad se veía lavada, y el rótulo anunciaba
   la carencia en cada tarjeta sin foto — que hoy son casi las 427. */
.plm-marcador {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--cream-2);
  text-align: center;
  padding: var(--sp-4);
}
/* `opacity` va explícita en 1 para que se lea como decisión y no como un
   olvido: el valor anterior era .55 y se veía lavada. Más grande que antes
   (era 44 % / 96 px), que es lo que pidió el negocio: «bien marcado». */
.plm-marcador img { width: 46%; max-width: 132px; height: auto; opacity: 1; }

/* --- CategoryTile --------------------------------------------------------- */
.plm-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--surface-card);
  color: var(--text-body);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.plm-tile:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  color: var(--text-body);
}
.plm-tile__icono { color: var(--brass-dark); }
.plm-tile__icono .plm-icon { transition: transform 260ms var(--ease-out); }
.plm-tile:hover .plm-tile__icono .plm-icon { transform: scale(1.12) rotate(-4deg); }
.plm-tile__nombre {
  font-family: var(--font-display);
  font-size: var(--type-h4);
  font-weight: var(--weight-semibold);
}
.plm-tile__count {
  display: block;
  margin-top: 2px;
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
.plm-tile--dark {
  background: var(--surface-inverse);
  border-color: var(--ink);
  color: var(--text-inverse);
}
.plm-tile--dark:hover { background: var(--ink-2); color: var(--text-inverse); }
.plm-tile--dark .plm-tile__icono { color: var(--text-accent-on-dark); }
.plm-tile--dark .plm-tile__count { color: rgba(255, 255, 255, .72); }

/* --- Breadcrumbs (separador = triángulo del motivo A) --------------------- */
.plm-migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--type-caption);
  color: var(--text-secondary);
}
.plm-migas li { display: flex; align-items: center; gap: var(--sp-2); }
.plm-migas li + li::before {
  content: '';
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid var(--brass);
}
.plm-migas a { color: var(--text-secondary); text-decoration: none; }
.plm-migas a:hover { color: var(--brass-dark); text-decoration: underline; }
.plm-migas [aria-current='page'] { color: var(--text-body); font-weight: var(--weight-medium); }
.plm-migas--ink { color: rgba(255, 255, 255, .72); }
.plm-migas--ink a { color: rgba(255, 255, 255, .72); }
.plm-migas--ink a:hover { color: var(--text-accent-on-dark); }
.plm-migas--ink [aria-current='page'] { color: var(--text-inverse); }

/* --- FilterGroup / FilterChip -------------------------------------------- */
.plm-filtros { display: block; }
/* Sin `min-width:0` una faceta con etiqueta larga fija el ancho mínimo de su
   columna de grid y la saca de la pantalla en 360px. */
.plm-fgroup { margin-bottom: var(--sp-6); min-width: 0; }
.plm-check > span:first-of-type { min-width: 0; overflow-wrap: anywhere; }
.plm-fgroup__titulo {
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--type-h6);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-body);
}
.plm-fgroup__conteo {
  margin-left: auto;
  font-size: var(--type-caption);
  color: var(--text-secondary);
  font-variant-numeric: var(--numeric-tabular);
}
.plm-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: var(--cream-2);
  font-size: var(--type-caption);
  color: var(--text-body);
  text-decoration: none;
}
.plm-fchip:hover { border-color: var(--ink); color: var(--text-body); }
.plm-fchip__x { display: flex; color: var(--graphite); }
.plm-fchip:hover .plm-fchip__x { color: var(--ink); }
.plm-limpiar {
  padding: var(--sp-1) 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--type-caption);
  color: var(--brass-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.plm-limpiar:hover { color: var(--brass-dark-deep); }

/* --- SpecTable (números tabulares, zebra crema) -------------------------- */
.plm-specs {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  font-size: var(--type-body-sm);
}
.plm-specs caption {
  padding: 0 0 var(--sp-3);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--type-h5);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.plm-specs th, .plm-specs td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.plm-specs tr:last-child th, .plm-specs tr:last-child td { border-bottom: 0; }
.plm-specs th { width: 42%; font-weight: var(--weight-medium); color: var(--text-secondary); }
.plm-specs td { color: var(--text-body); font-variant-numeric: var(--numeric-tabular); }
/* Una tabla no baja de su ancho mínimo: en 360px un valor largo la desbordaría. */
.plm-specs th, .plm-specs td { overflow-wrap: anywhere; }
.plm-specs tbody tr:nth-child(odd) { background: var(--cream-2); }
.plm-specs__borrador {
  margin-left: 6px;
  font-size: var(--type-caption);
  color: var(--brass-dark);
  cursor: help;
}

/* --- Accordion (un panel a la vez) -------------------------------------- */
.plm-acordeon { border: 1px solid var(--line); border-radius: var(--radius-1); }
.plm-acordeon details + details { border-top: 1px solid var(--line); }
.plm-acordeon summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--target-min);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--type-h5);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-1) var(--ease-out);
}
.plm-acordeon summary::-webkit-details-marker { display: none; }
.plm-acordeon summary:hover { background: var(--cream-2); }
.plm-acordeon summary .plm-icon { color: var(--brass-dark); transition: transform var(--dur-2) var(--ease-out); }
.plm-acordeon details[open] summary .plm-icon { transform: rotate(180deg); }
.plm-acordeon__panel {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
}
.plm-acordeon__panel p:last-child { margin-bottom: 0; }

/* --- BrandStrip (marcas en texto: logos autorizados pendientes) ---------- */
.plm-brands {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plm-brands li {
  font-family: var(--font-display);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: .02em;
  color: var(--graphite);
  white-space: nowrap;
}

/* --- Header (barra superior + nav + buscador + CTA), sticky -------------- */
.plm-header { position: sticky; top: 0; z-index: 40; background: var(--surface-card); }
.plm-header__top {
  background: var(--surface-inverse);
  color: rgba(255, 255, 255, .82);
  font-size: var(--type-caption);
}
.plm-header__top .plm-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 34px;
  flex-wrap: wrap;
}
.plm-header__top a { color: var(--text-accent-on-dark); text-decoration: none; }
.plm-header__top a:hover { text-decoration: underline; }
.plm-header__tel { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: var(--numeric-tabular); }

/* Acceso al club en la barra principal, en brass lleno: es lo único del header
   que vende algo, así que no compite como una liga más de la nav. */
.plm-btn--socio {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
  white-space: nowrap;
}
/* El hover NO usa --brass-dark: ese token es para TEXTO dorado sobre claro
   (#8A6A35) y como fondo se ve sucio. Se oscurece el mismo brass. */
.plm-btn--socio:hover { filter: brightness(.94); }
.plm-header__barra {
  border-bottom: 1px solid var(--line);
}
.plm-header__barra .plm-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 74px;
}
.plm-header__logo { display: flex; align-items: center; flex: none; }
.plm-header__logo img { height: 30px; width: auto; }
.plm-nav { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.plm-nav a {
  padding: var(--sp-2) 0;
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.plm-nav a:hover { color: var(--brass-dark); border-bottom-color: var(--brass); }
.plm-nav a[aria-current='page'] { border-bottom-color: var(--brass); }
.plm-header__acciones { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.plm-buscador { position: relative; display: flex; align-items: stretch; max-width: 280px; flex: 1 1 180px; min-width: 0; margin-left: auto; }
.plm-buscador input {
  min-width: 0;
  border-right: 0;
  border-radius: var(--radius-1) 0 0 var(--radius-1);
}
.plm-buscador button {
  border-radius: 0 var(--radius-1) var(--radius-1) 0;
  padding: 0 var(--sp-3);
}
/* Contador de la cotización: el número es el estado del carrito. */
.plm-cuenta {
  position: relative;
}
.plm-cuenta__num {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--brass-dark);
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: var(--numeric-tabular);
}
.plm-menu-btn { display: none; }
.plm-header__catalogo {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 2px; font-size: var(--type-body-sm); font-weight: var(--weight-semibold);
  color: var(--text-body); text-decoration: none; border-bottom: 2px solid transparent;
}
.plm-header__catalogo:hover { color: var(--brass-dark); }
.plm-header__catalogo[aria-current='page'] { border-bottom-color: var(--brass); }
@media (max-width: 479px) { .plm-header__solo-ancho { display: none; } }
@media (max-width: 1023px) {
  /* Renglón 1: logo · contador · CTA · menú. Renglón 2: buscador a todo lo ancho.
     Renglón 3: el nav, colapsado. */
  .plm-header__barra .plm-wrap {
    min-height: 0;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
  }
  .plm-header__logo { margin-right: auto; }
  .plm-menu-btn { display: inline-flex; order: 3; }
  .plm-header__acciones { order: 2; }
  /* El CTA de WhatsApp queda como ícono: la etiqueta no cabe y el ícono se lee. */
  .plm-header__acciones .plm-btn { padding: 0 var(--sp-3); }
  .plm-header__acciones .plm-btn > span { display: none; }
  .plm-buscador { order: 8; flex: 1 1 100%; max-width: none; margin: 0; }
  .plm-nav {
    order: 10;
    width: 100%;
    gap: 0;
    flex-direction: column;
    align-items: stretch;
    border-top: 1px solid var(--line);
  }
  .plm-nav a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .plm-nav[hidden] { display: none; }
}
/* Menú del teléfono: botón con texto y un desplegable con cada opción
   rotulada. En escritorio no existe. */
.plm-menu-movil, .plm-menu-desplegable { display: none; }
@media (max-width: 767px) {
  .plm-header { position: sticky; }
  .plm-header__catalogo, .plm-header .plm-btn--socio, .plm-header__acciones { display: none; }
  .plm-header__logo img { height: 24px !important; }
  .plm-menu-movil {
    position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-1);
    background: var(--surface-card); color: var(--text-body); cursor: pointer;
    font: var(--weight-semibold) var(--type-body-sm) var(--font-body);
  }
  .plm-menu-movil[aria-expanded="true"] { border-color: var(--brass); }
  .plm-menu-movil .plm-cuenta__num { top: -6px; right: -6px; }
  .plm-menu-desplegable:not([hidden]) {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
    background: var(--surface-card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-3);
    padding: var(--sp-2) var(--gutter-mobile, 16px) var(--sp-3);
  }
  .plm-menu-desplegable a {
    position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; column-gap: var(--sp-3);
    padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--text-body); text-decoration: none;
    font-size: var(--type-body); font-weight: var(--weight-medium);
  }
  .plm-menu-desplegable a:last-child { border-bottom: 0; }
  .plm-menu-desplegable a .plm-icon { color: var(--brass-dark); }
  .plm-menu-desplegable small { grid-column: 2; font-size: var(--type-caption); color: var(--text-secondary); font-weight: 400; }
  .plm-menu-desplegable .plm-cuenta__num { position: static; }
}
@media (max-width: 767px) {
  .plm-header__top .plm-wrap { min-height: 30px; font-size: 11px; }
  .plm-header__tel { display: none; }
  .plm-header__logo img { height: 26px; }
}

/* --- Footer -------------------------------------------------------------- */
.plm-footer {
  background: var(--surface-inverse);
  color: rgba(255, 255, 255, .78);
  padding: var(--sp-9) 0 var(--sp-5);
  font-size: var(--type-body-sm);
}
.plm-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-7);
  padding-bottom: var(--sp-7);
}
.plm-footer h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--type-h6);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-accent-on-dark);
}
.plm-footer img.plm-footer__logo { height: 28px; width: auto; margin-bottom: var(--sp-4); }
.plm-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.plm-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.plm-footer a:hover { color: var(--text-accent-on-dark); text-decoration: underline; }
/* El botón dorado del pie: la regla de arriba le ponía texto blanco sobre
   dorado (contraste 2.1). */
.plm-footer a.plm-btn--inverse, .plm-footer a.plm-btn--inverse:hover { color: #151515; text-decoration: none; }
.plm-footer__dato { display: flex; gap: var(--sp-2); align-items: flex-start; }
.plm-footer__dato .plm-icon { color: var(--brass); margin-top: 3px; }
.plm-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--type-caption);
  color: rgba(255, 255, 255, .6);
}
@media (max-width: 1023px) { .plm-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 767px) { .plm-footer__cols { grid-template-columns: 1fr; } }

/* --- Hero (home · linea · campana) --------------------------------------- */
.plm-hero { position: relative; overflow: hidden; }
.plm-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-10) 0;
}
/* Extensión del DS aplicada aquí (PLOMART-DEV, punto 4): sin `media` el panel
   no se renderiza, en vez de dejar un bloque crema vacío. */
.plm-hero__grid--sin-media { grid-template-columns: 1fr; max-width: 68ch; }
.plm-hero__titulo { margin: 0 0 var(--sp-4); font-size: var(--type-display); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); text-wrap: balance; }
.plm-hero__sub { margin: 0 0 var(--sp-6); font-size: var(--type-body-lg); max-width: 52ch; }
.plm-hero__acciones { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.plm-hero__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.plm-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.plm-hero--home { background: var(--surface-inverse); color: var(--text-inverse); }
.plm-hero--home .plm-hero__titulo { color: var(--text-inverse); }
.plm-hero--home .plm-hero__sub { color: rgba(255, 255, 255, .82); }
.plm-hero--home .plm-eyebrow { color: var(--text-accent-on-dark); }

.plm-hero--linea { background: var(--surface-alt); }
.plm-hero--linea .plm-hero__grid { padding: var(--sp-6) 0 var(--sp-7); grid-template-columns: 1fr; }
.plm-hero--linea .plm-hero__titulo { font-size: var(--type-h1); }
.plm-hero--linea .plm-hero__sub { font-size: var(--type-body); color: var(--text-secondary); margin-bottom: var(--sp-5); }
.plm-hero--linea .plm-eyebrow { color: var(--brass-dark-deep); }
.plm-hero--linea .plm-eyebrow::before { border-bottom-color: var(--brass-dark); }

/* campana: franja brass. El dorado como fondo es decorativo; el texto va ink. */
.plm-hero--campana { background: var(--brass); color: var(--ink); }
.plm-hero--campana .plm-hero__grid {
  grid-template-columns: 1fr auto;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-7) 0;
}
.plm-hero--campana .plm-hero__titulo { font-size: var(--type-h3); margin-bottom: var(--sp-2); }
.plm-hero--campana .plm-hero__sub { font-size: var(--type-body-sm); margin: 0; color: rgba(21, 21, 21, .78); }

@media (max-width: 1023px) {
  .plm-hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-8) 0; }
  .plm-hero--campana .plm-hero__grid { grid-template-columns: 1fr; }
}

/* --- QuoteDrawer --------------------------------------------------------- */
.plm-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(21, 21, 21, .4); /* scrim plano: sin blur, sin gradiente */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.plm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100%;
  background: var(--surface-card);
  border-radius: var(--radius-2) 0 0 var(--radius-2);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform var(--dur-2) var(--ease-out);
}
body.plm-drawer-abierto .plm-drawer-scrim { opacity: 1; visibility: visible; }
body.plm-drawer-abierto .plm-drawer { transform: none; }
body.plm-drawer-abierto { overflow: hidden; }
.plm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.plm-drawer__head h2 { margin: 0; font-size: var(--type-h4); }
.plm-drawer__lista { flex: 1; overflow-y: auto; padding: var(--sp-2) var(--sp-4); }
.plm-drawer__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.plm-drawer__item:last-child { border-bottom: 0; }
.plm-drawer__nombre { font-size: var(--type-body-sm); font-weight: var(--weight-medium); }
.plm-drawer__meta { font-size: var(--type-caption); color: var(--text-secondary); font-variant-numeric: var(--numeric-tabular); }
.plm-drawer__pie {
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
  background: var(--surface-card);
}
.plm-drawer__nota { margin: 0; font-size: var(--type-caption); color: var(--text-secondary); }
.plm-drawer__vacio { padding: var(--sp-8) var(--sp-4); text-align: center; }

/* --- EmptyState ---------------------------------------------------------- */
.plm-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
}
.plm-vacio__icono { color: var(--accent-deco); }
.plm-vacio h2, .plm-vacio h3 { margin: 0; font-size: var(--type-h4); }
.plm-vacio p { margin: 0; max-width: 52ch; color: var(--text-secondary); font-size: var(--type-body-sm); }
.plm-vacio__accion { margin-top: var(--sp-3); }

/* --- Skeleton (pulso sobrio) -------------------------------------------- */
.plm-skel {
  background: var(--cream-2);
  border-radius: var(--radius-1);
  animation: plm-pulso 1.4s var(--ease-in-out) infinite;
}
@keyframes plm-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.plm-skel-card { border: 1px solid var(--line); border-radius: var(--radius-1); }
.plm-skel-card__media { aspect-ratio: 1; }
.plm-skel-card__cuerpo { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.plm-skel-linea { height: 12px; }
.plm-skel-linea--corta { width: 45%; }
.plm-skel-linea--media { width: 75%; }
.plm-skel-linea--cta { height: var(--target-min); margin-top: var(--sp-2); }

/* --- Reveal por scroll (solo en páginas de venta) ------------------------ */
/* El estado oculto lo aplica JS: si JS falla, nada queda invisible. */
[data-reveal].plm-oculto { opacity: 0; transform: translateY(8px); }
[data-reveal] {
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].plm-oculto { opacity: 1; transform: none; }
}

/* --- Avisos y notas ----------------------------------------------------- */
.plm-nota {
  margin: var(--sp-3) 0 0;
  font-size: var(--type-caption);
  color: var(--text-secondary);
  max-width: 78ch;
}
/* Bloque con barra brass: lo que Chala tiene que validar, visible, no escondido. */
.plm-aviso {
  border-left: 2px solid var(--brass);
  background: var(--surface-alt);
  padding: var(--sp-4);
}
.plm-aviso p { margin: 0 0 var(--sp-2); font-size: var(--type-body-sm); }
.plm-aviso p:last-child { margin-bottom: 0; }
.plm-aviso--ok { border-left-color: var(--ok); background: var(--cream-2); }

.plm-figura { margin: 0; position: relative; overflow: hidden; background: var(--cream-2); }
.plm-figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.plm-figura:hover img { transform: scale(1.04); }
/* Protección de texto sobre foto: cápsula ink sólida, nunca gradiente. */
.plm-figura figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--type-caption);
}
.plm-mapa { border: 1px solid var(--line); overflow: hidden; background: var(--cream-2); }
.plm-mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }

/* --- Precio en la tarjeta y en la ficha -----------------------------------
   El monto manda; el «IVA incluido» es la condición que la LFPC obliga a
   exhibir junto al precio total, no letra chiquita decorativa. */
/* Los dos precios, siempre. El de mostrador no se puede esconder (LFPC art. 7
   BIS) y el de socio se publica con su condición al lado. La diferencia entre
   los dos es lo que vende la membresía.

   El precio NO puede ser más grande que el nombre del producto: la tarjeta
   vende el producto, el precio lo califica. */
/* El bloque de precio se va al fondo de la tarjeta, no a donde acabe el
   nombre. El `margin-top:auto` vivía en `__pie`, así que el botón sí alineaba
   pero el precio subía y bajaba con el largo del nombre: dos tarjetas lado a
   lado se veían desparejas. Ahora el `auto` lo tiene el precio y el pie lo
   sigue pegado; cuando no hay precio, el `auto` del pie hace su trabajo igual. */
.plm-pcard__precio { margin: auto 0 0; }
.plm-pcard__precio ~ .plm-pcard__pie { margin-top: 0; }
.plm-pcard__precio p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 0; }
.plm-pcard__precio b { font-size: var(--type-body); color: var(--text-primary); }
.plm-pcard__precio span { font-size: var(--type-caption); color: var(--text-secondary); }
.plm-pcard__precio--socio { color: var(--brass-dark-deep) !important; }
.plm-pcard__socio {
  margin-top: 2px !important; font-size: var(--type-caption); color: var(--text-secondary);
}
.plm-pcard__socio b { font-size: var(--type-body-sm); color: var(--brass-dark-deep); }
.plm-pcard__socio s { color: var(--text-secondary); }
/* En la ficha los dos precios van en renglones, alineados a la derecha, para
   que la diferencia se lea de un vistazo. Por debajo del h1: el nombre es el
   encabezado de la página, no el importe. */
.ct-slot-precio {
  display: grid; gap: 2px; margin: 0 0 22px; padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-md, 10px);
  max-width: 34rem;
}
.ct-slot-precio__fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.ct-slot-precio__fila span { font-size: var(--type-body-sm); color: var(--text-secondary); }
.ct-slot-precio__fila b { font-size: var(--type-h3); line-height: 1.2; color: var(--text-primary); }
.ct-slot-precio__fila--alt b { font-size: var(--type-h4); }
.ct-slot-precio__socio { color: var(--brass-dark-deep) !important; }
.ct-slot-precio__ahorro {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--line);
  font-size: var(--type-body-sm); color: var(--text-secondary);
}
.ct-slot-precio__ahorro b { color: var(--brass-dark-deep); }
.ct-slot-precio__ahorro a { color: var(--text-accent); font-weight: 600; }
.ct-slot-precio__iva { font-size: var(--type-caption); color: var(--text-secondary); }

/* --- Precio en tarjeta: socio al frente -----------------------------------
   Decisión del negocio (2026-09-23): el precio de socio es el protagonista,
   grande y en dorado; el de mostrador va debajo y siempre visible, con la
   condición escrita («Socio Plomart»), que es lo que pide la LFPC art. 7 BIS.
   Lo usan el catálogo y la tarjeta de producto del resto del sitio. */
/* Precio: socio grande y en dorado; mostrador debajo, visible. */
.cg-precio { margin-top: auto; padding-top: var(--sp-2); display: grid; gap: 2px; }
.cg-precio p { margin: 0; }
.cg-precio__socio { display: flex; flex-direction: column; }
.cg-precio__socio span { font-size: var(--type-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase;
                         font-weight: var(--weight-semibold); color: var(--brass-dark); }
.cg-precio__socio b { font-family: var(--font-display); font-size: var(--type-h4); font-weight: var(--weight-bold);
                      color: var(--brass-dark-deep, #7a5a1f); font-variant-numeric: var(--numeric-tabular); line-height: 1.1; }
.cg-precio__mostrador { font-size: var(--type-body-sm); color: var(--text-secondary); }
.cg-precio__mostrador b { color: var(--text-body); font-weight: var(--weight-semibold); font-variant-numeric: var(--numeric-tabular); }
.cg-precio__unico b { font-family: var(--font-display); font-size: var(--type-h4); font-weight: var(--weight-bold);
                      font-variant-numeric: var(--numeric-tabular); }
.cg-precio small { font-size: var(--type-caption); color: var(--text-secondary); }
.cg-precio + .plm-pcard__pie { margin-top: 0; }