/* Figuras Hairline en la paleta de L'Evocative: papel cálido, tinta carbón y cobre como único trazo encendido. */
:root {
  --hairline-plate: #f3f2ee;
  --hairline-hi: #86603d;
  --hairline-edge: #3a352f;
  --hairline-mid: #a39b8f;
  --hairline-lo: #d6d1c7;
  --hairline-stroke: 0.9;
}
:root[data-tema="oscuro"] {
  --hairline-plate: #0c0c0b;
  --hairline-hi: #c89b6c;
  --hairline-edge: #b4aea4;
  --hairline-mid: #5c5750;
  --hairline-lo: #2c2a26;
}
.hl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; margin-bottom: 64px; }
.hl-head > .h2 { margin: 0; }
.hl-head + .areas { margin-top: 0; }
.hl-fig { margin: 0; width: 340px; }
.hl-fig--sm { width: 240px; }
.hl-stage { width: 100%; aspect-ratio: 5 / 4; cursor: crosshair; }
.hl-fig figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 0 4px;
  white-space: nowrap; font: 500 11px/1.4 ui-monospace, "Geist Mono", SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--ink-2); }
.hl-fig figcaption span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hl-fig figcaption b { font-weight: 500; color: var(--cu); font-variant-numeric: tabular-nums; }
/* dentro de columnas y del panel de contacto */
.control__copy .hl-fig, .faq .hl-fig { margin-top: 32px; }
.cta__panel .hl-fig { --hairline-plate: #fbf9f5; margin-top: 24px; }
:root[data-tema="oscuro"] .cta__panel .hl-fig { --hairline-plate: #141412; }
.how__side .hl-fig { width: 260px; }
@media (max-width: 760px) {
  .hl-head { grid-template-columns: 1fr; margin-bottom: 40px; }
  .hl-fig, .hl-fig--sm { width: min(260px, 100%); }
}