/* ============================================================
   senalamientosviales.mx — componentes.css
   Requiere tokens.css antes. Todas las clases llevan el prefijo .svm-
   y ningún color está escrito aquí: todo sale de un token.
   Celular primero (360–414 px); escritorio a partir de 1024 px.
   ============================================================ */

/* ============ 0. Base ============ */
.svm-body {
  margin: 0;
  background: var(--svm-bg);
  color: var(--svm-ink);
  font-family: var(--svm-font);
  font-size: var(--svm-text);
  line-height: var(--svm-text-lh);
  -webkit-text-size-adjust: 100%;
}
.svm-body *, .svm-body *::before, .svm-body *::after { box-sizing: border-box; }
.svm-body img, .svm-body svg { max-width: 100%; }
.svm-wrap { max-width: var(--svm-max); margin-left: auto; margin-right: auto; padding-left: var(--svm-pad); padding-right: var(--svm-pad); }

.svm-h1, .svm-h2, .svm-h3 { font-family: var(--svm-font-display); font-weight: var(--svm-peso-negrita); margin: 0; overflow-wrap: break-word; }
.svm-h1 { font-size: var(--svm-h1); line-height: var(--svm-h1-lh); margin-bottom: var(--svm-space-2); }
.svm-h2 { font-size: var(--svm-h2); line-height: var(--svm-h2-lh); margin-bottom: var(--svm-space-3); }
.svm-h3 { font-size: var(--svm-h3); line-height: var(--svm-h3-lh); margin-bottom: var(--svm-space-2); font-weight: var(--svm-peso-medio); }
.svm-text { margin: 0 0 var(--svm-space-3); }
.svm-text--2 { color: var(--svm-ink-2); }
.svm-small { font-size: var(--svm-small); line-height: var(--svm-small-lh); }
.svm-nota { font-size: var(--svm-small); line-height: var(--svm-small-lh); color: var(--svm-ink-3); margin: 0; }
.svm-label {
  font-family: var(--svm-font-display);
  font-size: var(--svm-label); line-height: var(--svm-label-lh);
  font-weight: var(--svm-peso-medio); letter-spacing: var(--svm-label-tracking); text-transform: uppercase;
  color: var(--svm-ink-3);
}
.svm-mono { font-family: var(--svm-font-mono); font-variant-numeric: tabular-nums; }
.svm-medida { white-space: nowrap; font-variant-numeric: tabular-nums; }
.svm-prose { max-width: 70ch; }
.svm-prose p { margin: 0 0 var(--svm-space-3); }
.svm-prose ul, .svm-prose ol { margin: 0 0 var(--svm-space-3); padding-left: 1.4em; }
.svm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Enlaces: el acento marca lo que se toca */
.svm-link, .svm-prose a { color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; }
.svm-link:hover, .svm-prose a:hover { color: var(--svm-link-hover); text-decoration-thickness: 2px; }
.svm-body :focus-visible { outline: var(--svm-focus-ring) solid var(--svm-focus); outline-offset: var(--svm-focus-offset); border-radius: var(--svm-radius); }

/* Botón */
.svm-btn {
  display: inline-block;
  background: var(--svm-accent);
  color: var(--svm-on-accent);
  font-family: var(--svm-font-display);
  font-weight: var(--svm-peso-medio);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 11px var(--svm-space-3);
  min-height: var(--svm-tap);
  border-radius: var(--svm-radius);
  border: var(--svm-border) solid var(--svm-accent);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.svm-btn:hover { background: var(--svm-accent-hover); border-color: var(--svm-accent-hover); color: var(--svm-on-accent); }
@media (min-width: 1024px) { .svm-btn { font-size: var(--svm-text); padding: 11px var(--svm-space-4); } }

/* Chips de variante: neutros, con borde. Nunca llevan el acento. */
.svm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--svm-space-1); }
.svm-chip {
  font-family: var(--svm-font-display);
  font-size: var(--svm-label); line-height: 1.2; font-weight: var(--svm-peso-medio); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 7px; border-radius: var(--svm-radius);
  border: var(--svm-border) solid var(--svm-line-strong); color: var(--svm-ink-2); background: var(--svm-surface);
}
.svm-chip--cotizar { color: var(--svm-cotizar-ink); background: var(--svm-cotizar-bg); border-color: var(--svm-cotizar-line); }

/* Etiqueta de tipo de señal: chip relleno con el color del tipo + su texto. El texto siempre está. */
.svm-tipo {
  display: inline-block; align-self: flex-start;
  font-family: var(--svm-font-display); font-size: var(--svm-label); font-weight: var(--svm-peso-medio); letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.2; padding: 4px 7px; border-radius: var(--svm-radius); border: var(--svm-border) solid var(--svm-line);
}
.svm-tipo--preventiva  { background: var(--svm-tipo-preventiva); color: var(--svm-tipo-ink); border-color: var(--svm-tipo-ink); }
.svm-tipo--restrictiva { background: var(--svm-tipo-blanco); color: var(--svm-tipo-restrictiva); border-color: var(--svm-tipo-restrictiva); }
.svm-tipo--informativa { background: var(--svm-tipo-informativa); color: var(--svm-tipo-blanco); border-color: var(--svm-tipo-informativa); }
.svm-tipo--obra        { background: var(--svm-tipo-obra); color: var(--svm-tipo-ink); border-color: var(--svm-tipo-ink); }

/* Pictograma: en las páginas de señales es la imagen de la señal en un <img> (WebP cuadrado);
   el SVG genérico en línea queda solo para figuras, como la tabla de forma y color de la guía. */
.svm-picto { display: block; width: 72px; height: 72px; flex: none; }
img.svm-picto { object-fit: contain; }
.svm-picto--preventiva  { fill: var(--svm-tipo-preventiva); stroke: var(--svm-tipo-ink); }
.svm-picto--obra        { fill: var(--svm-tipo-obra); stroke: var(--svm-tipo-ink); }
.svm-picto--restrictiva { fill: var(--svm-tipo-blanco); stroke: var(--svm-tipo-restrictiva); }
.svm-picto--informativa { fill: var(--svm-tipo-informativa); stroke: var(--svm-tipo-blanco); }
.svm-picto--borde       { fill: none; stroke: var(--svm-tipo-ink); }
.svm-picto--destino     { fill: var(--svm-tipo-destino); stroke: var(--svm-tipo-blanco); }
.svm-picto--adicional   { fill: var(--svm-tipo-ink); stroke: var(--svm-tipo-ink); }

/* Secciones y bandas */
.svm-section { padding-top: var(--svm-space-6); padding-bottom: var(--svm-space-6); }
.svm-section--band { background: var(--svm-bg-2); }
.svm-section__intro { color: var(--svm-ink-2); max-width: 70ch; margin: 0 0 var(--svm-space-4); }

/* ============ 2. Encabezado, menú y pie ============ */
.svm-header { background: var(--svm-surface); border-top: 4px solid var(--svm-accent); border-bottom: var(--svm-border) solid var(--svm-line); position: relative; }
.svm-header__strip { background: var(--svm-bg-2); border-bottom: var(--svm-border) solid var(--svm-line); font-size: var(--svm-small); color: var(--svm-ink-2); }
.svm-header__strip .svm-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--svm-space-3); min-height: 36px; }
.svm-header__envio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svm-header__tel { font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 36px; font-variant-numeric: tabular-nums; flex: none; }
.svm-header__tel:hover { color: var(--svm-link-hover); }
.svm-header__bar { display: flex; align-items: center; gap: var(--svm-space-3); min-height: 56px; }
.svm-logo { display: inline-flex; align-items: center; min-height: var(--svm-tap); margin-right: auto; flex: none; }
.svm-logo img { display: block; height: 24px; width: auto; max-width: none; }

/* Menú plegable: <details class="svm-nav"> con <summary> «Menú» */
.svm-nav__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: var(--svm-tap); padding: 0 var(--svm-space-3);
  font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); letter-spacing: 0.02em;
  border: var(--svm-border) solid var(--svm-line-strong); border-radius: var(--svm-radius); color: var(--svm-ink);
}
.svm-nav__toggle::-webkit-details-marker { display: none; }
.svm-nav__toggle::after { content: "▾"; margin-left: 6px; }
.svm-nav[open] > .svm-nav__toggle::after { content: "▴"; }
.svm-nav[open] > .svm-nav__toggle { background: var(--svm-accent-soft); border-color: var(--svm-accent); }
.svm-nav__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--svm-surface); border-bottom: var(--svm-border) solid var(--svm-line);
  max-height: calc(100vh - 64px); overflow: auto;
  padding: var(--svm-space-2) var(--svm-pad) var(--svm-space-4);
}
.svm-nav__groups { list-style: none; margin: 0; padding: 0; }
.svm-nav__group { border-bottom: var(--svm-border) solid var(--svm-line); }
.svm-nav__group-toggle {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; min-height: var(--svm-tap);
  font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); font-size: var(--svm-text); color: var(--svm-ink);
}
.svm-nav__group-toggle::-webkit-details-marker { display: none; }
.svm-nav__group-toggle::after { content: "▾"; color: var(--svm-ink-3); }
.svm-nav__sub[open] > .svm-nav__group-toggle::after { content: "▴"; }
.svm-nav__list { list-style: none; margin: 0; padding: 0 0 var(--svm-space-2); }
.svm-nav__list a {
  display: block; padding: 9px var(--svm-space-3); min-height: 40px;
  color: var(--svm-ink); text-decoration: none; border-radius: var(--svm-radius);
}
.svm-nav__list a:hover { background: var(--svm-bg-2); text-decoration: underline; }
.svm-nav__list a[aria-current="page"] { color: var(--svm-accent); background: var(--svm-accent-soft); font-weight: var(--svm-peso-medio); }
.svm-nav__cta { display: block; margin-top: var(--svm-space-3); }
.svm-nav__contacto { margin: var(--svm-space-3) 0 0; padding: var(--svm-space-3) 0 0; border-top: var(--svm-border) solid var(--svm-line); display: grid; gap: var(--svm-space-1); font-size: var(--svm-small); }
.svm-nav__contacto a { color: var(--svm-link); display: inline-flex; align-items: center; min-height: 36px; }

/* Pie */
.svm-footer { background: var(--svm-bg-2); border-top: var(--svm-border) solid var(--svm-line); padding-top: var(--svm-space-6); padding-bottom: var(--svm-space-6); font-size: var(--svm-small); color: var(--svm-ink-2); }
.svm-footer__cols { display: grid; gap: var(--svm-space-5); }
.svm-footer__titulo { font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); color: var(--svm-ink); margin: 0 0 var(--svm-space-2); font-size: var(--svm-text); }
.svm-footer__cols ul + .svm-footer__titulo { margin-top: var(--svm-space-5); }
.svm-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.svm-footer a { color: var(--svm-ink-2); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 32px; }
.svm-footer a:hover { color: var(--svm-link-hover); }
.svm-footer__contacto, .svm-nav__contacto { margin: 0; }
.svm-footer__contacto dt, .svm-nav__contacto dt { color: var(--svm-ink-3); font-size: var(--svm-small); margin-top: var(--svm-space-2); }
.svm-footer__contacto dd, .svm-nav__contacto dd { margin: 0; }
.svm-footer__contacto a { color: var(--svm-link); font-weight: var(--svm-peso-medio); }
.svm-footer__legal { margin: var(--svm-space-5) 0 0; padding-top: var(--svm-space-3); border-top: var(--svm-border) solid var(--svm-line); color: var(--svm-ink-3); }

@media (min-width: 1024px) {
  .svm-header__bar { flex-wrap: wrap; row-gap: 0; }
  .svm-logo img { height: 28px; }
  .svm-nav { flex-basis: 100%; }
  /* El panel deja de ser desplegable: se muestra siempre y no repite enlaces */
  @supports selector(::details-content) {
    .svm-nav__toggle { display: none; }
    .svm-nav::details-content { display: block; content-visibility: visible; }
    .svm-nav__panel { position: static; max-height: none; overflow: visible; padding: 0; border-bottom: 0; }
    .svm-nav__groups { display: flex; align-items: center; gap: var(--svm-space-2); }
    .svm-nav__group { border-bottom: 0; position: relative; }
    .svm-nav__group-toggle { gap: 6px; padding: 0 var(--svm-space-3); min-height: 48px; border-bottom: var(--svm-border-strong) solid var(--svm-surface); }
    .svm-nav__sub[open] > .svm-nav__group-toggle { border-bottom-color: var(--svm-accent); color: var(--svm-accent); }
    .svm-nav__group--actual > .svm-nav__sub > .svm-nav__group-toggle { border-bottom-color: var(--svm-accent); }
    .svm-nav__list {
      position: absolute; left: 0; top: 100%; z-index: 30; min-width: 260px;
      background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius-lg);
      padding: var(--svm-space-2);
    }
    .svm-nav__list--2col { columns: 2; column-gap: var(--svm-space-2); min-width: 520px; }
    .svm-nav__list--2col li { break-inside: avoid; }
    .svm-nav__groups > li:last-child { margin-left: auto; }
    .svm-nav__cta { margin: 0; }
    .svm-nav__contacto { display: none; }
  }
  /* Sin ::details-content (navegadores anteriores a 2025): el menú sigue siendo
     desplegable con el botón «Menú», como en celular. Nada se rompe. */
  .svm-footer__cols { grid-template-columns: 2fr 2fr 1.5fr; }
}

/* ============ 3. Migas de pan ============ */
.svm-migas { list-style: none; margin: 0; padding: var(--svm-space-3) 0; display: flex; flex-wrap: wrap; gap: var(--svm-space-1) 0; font-size: var(--svm-small); color: var(--svm-ink-3); }
.svm-migas li { display: inline-flex; align-items: center; }
.svm-migas li + li::before { content: "/"; margin: 0 var(--svm-space-2); color: var(--svm-line-strong); }
.svm-migas a { color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 32px; }
.svm-migas a:hover { color: var(--svm-link-hover); }
.svm-migas [aria-current="page"] { color: var(--svm-ink-2); }

/* ============ 4. Cabecera de categoría ============ */
.svm-cabecera { padding-top: var(--svm-space-4); padding-bottom: var(--svm-space-5); display: grid; gap: var(--svm-space-4); }
.svm-cabecera__media { order: -1; }
.svm-cabecera__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius-lg); }
.svm-cabecera__lead { font-size: var(--svm-text); color: var(--svm-ink-2); margin: 0 0 var(--svm-space-4); max-width: 60ch; }
.svm-cabecera__acciones { display: flex; flex-wrap: wrap; gap: var(--svm-space-2); align-items: center; }
.svm-cabecera__envio { display: flex; gap: var(--svm-space-2); align-items: center; margin: var(--svm-space-3) 0 0; color: var(--svm-ink-2); font-size: var(--svm-small); }
.svm-indice { margin-top: var(--svm-space-4); padding-top: var(--svm-space-3); border-top: var(--svm-border) solid var(--svm-line); }
.svm-indice__titulo { margin: 0 0 var(--svm-space-2); }
.svm-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--svm-space-1) var(--svm-space-4); }
.svm-indice a { color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; min-height: 36px; }
.svm-indice a:hover { color: var(--svm-link-hover); }
@media (min-width: 1024px) {
  .svm-cabecera { grid-template-columns: 1fr 420px; gap: var(--svm-space-6); align-items: start; padding-top: var(--svm-space-5); }
  .svm-cabecera__media { order: 0; }
}

/* ============ 5. Sección de subtipo y cuadrícula ============ */
.svm-subtipo { padding-top: var(--svm-space-5); padding-bottom: var(--svm-space-5); border-top: var(--svm-border) solid var(--svm-line); }
.svm-subtipo__cabeza { margin-bottom: var(--svm-space-4); }
.svm-subtipo__n { font-family: var(--svm-font); font-weight: var(--svm-peso-normal); font-size: var(--svm-small); color: var(--svm-ink-3); margin-left: var(--svm-space-2); white-space: nowrap; }
.svm-subtipo__cuando { color: var(--svm-ink-2); max-width: 70ch; margin: 0; }
.svm-subtipo__pie { margin-top: var(--svm-space-3); font-size: var(--svm-small); }
.svm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* «Ver los otros n modelos»: las primeras tarjetas siempre visibles; el resto, plegado en celular */
.svm-mas { margin-top: var(--svm-gap); }
.svm-mas__toggle {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; min-height: var(--svm-tap); padding: var(--svm-space-2) var(--svm-space-3); text-align: center;
  font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); color: var(--svm-accent);
  border: var(--svm-border) solid var(--svm-accent); border-radius: var(--svm-radius); background: var(--svm-surface);
}
.svm-mas__toggle::-webkit-details-marker { display: none; }
.svm-mas__toggle:hover { background: var(--svm-accent-soft); color: var(--svm-accent-hover); }
.svm-mas[open] > .svm-mas__toggle { margin-bottom: var(--svm-gap); }
.svm-mas[open] > .svm-mas__toggle::after { content: " (ocultar)"; font-weight: var(--svm-peso-normal); }
@media (min-width: 720px) { .svm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .svm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @supports selector(::details-content) {
    .svm-mas__toggle { display: none; }
    .svm-mas::details-content { display: block; content-visibility: visible; }
  }
}

/* ============ 6. Tarjeta de modelo ============ */
.svm-card { background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); display: flex; flex-direction: column; min-width: 0; }
.svm-card__media { background: var(--svm-surface); border-bottom: var(--svm-border) solid var(--svm-line); }
.svm-card__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--svm-surface); }
.svm-card__body { padding: 10px var(--svm-space-3) var(--svm-space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.svm-card__name { font-family: var(--svm-font-display); font-size: 17px; line-height: 1.2; font-weight: var(--svm-peso-negrita); margin: 0; overflow-wrap: break-word; }
.svm-card__key { font-family: var(--svm-font-mono); font-size: 12px; color: var(--svm-ink-3); }
.svm-card__size { font-size: var(--svm-small); color: var(--svm-ink-2); }
.svm-card__size strong { color: var(--svm-ink); font-weight: var(--svm-peso-medio); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .svm-card__body { padding: var(--svm-space-3) var(--svm-space-4) var(--svm-space-4); gap: var(--svm-space-2); }
  .svm-card__name { font-size: 19px; }
}

/* ============ 7. Tarjeta de señal ============ */
.svm-signs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svm-sign { background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); padding: 10px; display: flex; flex-direction: column; gap: var(--svm-space-1); min-width: 0; }
.svm-sign .svm-picto { margin: 0 auto var(--svm-space-1); }
.svm-sign__code { font-family: var(--svm-font-mono); font-weight: var(--svm-peso-negrita); font-size: var(--svm-small); }
.svm-sign__name, .svm-prose .svm-sign__name { font-size: var(--svm-small); line-height: 1.3; margin: 0; }
.svm-sign__nota, .svm-prose .svm-sign__nota { font-size: 12px; color: var(--svm-ink-3); line-height: 1.4; margin: 2px 0 0; }
.svm-sign__sizes { font-size: 12px; color: var(--svm-ink-3); line-height: 1.4; margin: 2px 0 0; }
.svm-sign__sizes dd { margin: 0; display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* El separador va al final del tamaño anterior: ninguna línea empieza con «·» */
.svm-sign__sizes dd:not(:last-of-type)::after { content: " ·"; margin-right: 4px; }
@media (min-width: 600px) { .svm-signs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--svm-gap); } }
@media (min-width: 1024px) { .svm-signs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .svm-sign .svm-picto { width: 88px; height: 88px; } .svm-sign__name { font-size: var(--svm-small); } }

/* ============ 8. Tabla de especificaciones ============ */
.svm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); background: var(--svm-surface); }
.svm-tablewrap:focus-visible { outline-offset: 0; }
.svm-table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: var(--svm-small); }
.svm-table th, .svm-table td { padding: 10px var(--svm-space-3); text-align: left; border-bottom: var(--svm-border) solid var(--svm-line); vertical-align: top; white-space: nowrap; }
.svm-table thead th { background: var(--svm-bg-2); color: var(--svm-ink-2); font-family: var(--svm-font-display); font-size: var(--svm-label); letter-spacing: var(--svm-label-tracking); text-transform: uppercase; font-weight: var(--svm-peso-medio); }
.svm-table tbody tr:last-child td, .svm-table tbody tr:last-child th { border-bottom: 0; }
.svm-table .svm-num { font-variant-numeric: tabular-nums; }
.svm-table caption { text-align: left; padding: var(--svm-space-2) var(--svm-space-3); font-size: var(--svm-small); color: var(--svm-ink-3); caption-side: bottom; }
/* Primera columna fija al desplazar en horizontal */
.svm-table th[scope="row"], .svm-table thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--svm-surface);
  box-shadow: 1px 0 0 var(--svm-line);
}
.svm-table thead th:first-child { background: var(--svm-bg-2); }
.svm-table th[scope="row"] { font-weight: var(--svm-peso-medio); }
.svm-table th[scope="row"] .svm-mono { display: block; font-weight: var(--svm-peso-normal); font-size: 12px; color: var(--svm-ink-3); }
/* En celular, el nombre de la primera columna se ajusta: fija y sin ajustar, llegaba a tapar las demás columnas */
@media (max-width: 719px) {
  .svm-table th[scope="row"] { white-space: normal; min-width: 130px; max-width: 150px; }
}
.svm-table--compacta { min-width: 480px; }
/* Tabla corta: columnas de medidas que caben completas en celular, sin desplazamiento */
.svm-table--corta { min-width: 0; }
.svm-table .svm-texto { white-space: normal; min-width: 240px; }
/* Tabla ajustada: en escritorio cabe completa sin desplazamiento; en celular se desplaza con la primera columna fija */
@media (min-width: 1024px) {
  .svm-table--ajustada { min-width: 0; }
  .svm-table--ajustada th, .svm-table--ajustada td { white-space: normal; }
  .svm-table--ajustada .svm-texto { min-width: 0; }
}
.svm-table--ancha { min-width: 720px; }

/* ============ 9. Galería ============ */
.svm-galeria { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svm-galeria--una { grid-template-columns: 1fr; }
.svm-galeria figure { margin: 0; min-width: 0; }
.svm-galeria__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--svm-bg-2); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); }
.svm-galeria figcaption { font-size: var(--svm-small); color: var(--svm-ink-2); margin-top: var(--svm-space-1); }
@media (min-width: 1024px) { .svm-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } .svm-galeria--una { grid-template-columns: minmax(0, 720px); } }

/* ============ Iconos en línea (SVG con trazo): toman el color del texto; nunca colores normativos ============ */
.svm-icono { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 10. Usos y normas ============ */
.svm-usos { display: grid; gap: var(--svm-space-4); }
.svm-usos__bloque { background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); padding: var(--svm-space-4); }
.svm-usos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-space-4); }
.svm-usos__lista li { display: flex; gap: var(--svm-space-3); align-items: flex-start; }
.svm-usos__lista strong { font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); font-size: var(--svm-h3); line-height: var(--svm-h3-lh); }
.svm-usos__lista p { margin: var(--svm-space-1) 0 0; color: var(--svm-ink-2); }
.svm-usos__icono { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--svm-radius); background: var(--svm-bg-2); color: var(--svm-ink-2); }
.svm-norma { margin: 0; }
.svm-nota + .svm-norma { margin-top: var(--svm-space-2); }
.svm-norma dt { font-family: var(--svm-font-mono); font-weight: var(--svm-peso-negrita); font-size: var(--svm-small); }
.svm-norma dd { margin: 0 0 var(--svm-space-2); color: var(--svm-ink-2); }
@media (min-width: 720px) { .svm-usos--solo .svm-usos__lista { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--svm-space-5); } }
@media (min-width: 1024px) { .svm-usos { grid-template-columns: 1fr 1fr; } .svm-usos--solo { grid-template-columns: 1fr; } }

/* ============ 11. Preguntas frecuentes ============ */
.svm-faq { border-top: var(--svm-border) solid var(--svm-line); }
.svm-faq__item { border-bottom: var(--svm-border) solid var(--svm-line); }
.svm-faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--svm-space-3); min-height: var(--svm-tap); padding: var(--svm-space-2) 0; font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); font-size: var(--svm-text); }
.svm-faq__q::-webkit-details-marker { display: none; }
.svm-faq__q::after { content: "+"; color: var(--svm-ink-3); font-size: 20px; flex: none; }
.svm-faq__item[open] > .svm-faq__q::after { content: "−"; }
.svm-faq__a { padding: 0 0 var(--svm-space-4); color: var(--svm-ink-2); max-width: 70ch; }
.svm-faq__a p { margin: 0 0 var(--svm-space-2); }

/* ============ 12. Bloque de cotización: la única banda oscura por pantalla ============ */
.svm-cotizar { background: var(--svm-dark); color: var(--svm-on-dark); padding-top: var(--svm-space-6); padding-bottom: var(--svm-space-6); }
.svm-cotizar :focus-visible { outline-color: var(--svm-focus-on-dark); }
.svm-cotizar__titulo { color: var(--svm-on-dark); }
.svm-cotizar__intro { color: var(--svm-on-dark-2); margin: 0 0 var(--svm-space-5); max-width: 60ch; }
.svm-cotizar__vias { list-style: none; margin: var(--svm-space-5) 0 0; padding: 0; display: grid; gap: var(--svm-space-3); }
.svm-cotizar__via { display: grid; grid-template-columns: auto 1fr; column-gap: var(--svm-space-3); align-items: center; padding: var(--svm-space-3) var(--svm-space-4); background: var(--svm-on-dark); color: var(--svm-ink); border-radius: var(--svm-radius-lg); text-decoration: none; min-height: var(--svm-tap); }
.svm-cotizar__via:hover { background: var(--svm-accent-soft); }
.svm-cotizar__via .svm-icono { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--svm-accent); }
.svm-cotizar__via-nombre { font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); font-size: var(--svm-label); letter-spacing: var(--svm-label-tracking); text-transform: uppercase; color: var(--svm-ink-3); }
.svm-cotizar__via-dato { font-weight: var(--svm-peso-medio); color: var(--svm-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.svm-cotizar__datos-titulo { color: var(--svm-on-dark-2); margin: 0 0 var(--svm-space-2); }
.svm-cotizar__datos { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--svm-space-2); counter-reset: dato; }
.svm-cotizar__datos li { display: flex; gap: var(--svm-space-3); align-items: baseline; padding: var(--svm-space-3); background: var(--svm-dark-2); border-radius: var(--svm-radius); color: var(--svm-on-dark-2); }
.svm-cotizar__datos li::before { counter-increment: dato; content: counter(dato); font-family: var(--svm-font-mono); color: var(--svm-on-dark-2); flex: none; }
.svm-cotizar__datos strong { display: block; color: var(--svm-on-dark); font-weight: var(--svm-peso-medio); }
.svm-cotizar__envio { display: flex; gap: var(--svm-space-3); align-items: flex-start; margin: var(--svm-space-5) 0 0; padding-top: var(--svm-space-4); border-top: var(--svm-border) solid var(--svm-line-on-dark); color: var(--svm-on-dark-2); max-width: 70ch; }
.svm-cotizar__envio strong { color: var(--svm-on-dark); }
.svm-cotizar__nota { color: var(--svm-on-dark-2); font-size: var(--svm-small); margin: var(--svm-space-3) 0 0; }
@media (min-width: 720px) {
  .svm-cotizar__vias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svm-cotizar__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .svm-cotizar__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ 13. Categorías hermanas y sitios hermanos ============ */
.svm-hermanas { padding-top: var(--svm-space-6); padding-bottom: var(--svm-space-6); border-top: var(--svm-border) solid var(--svm-line); }
.svm-hermanas .svm-subtipo__cuando { margin-bottom: var(--svm-space-3); }
.svm-hermanas__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svm-sitios { padding-top: var(--svm-space-5); padding-bottom: var(--svm-space-5); background: var(--svm-bg-2); border-top: var(--svm-border) solid var(--svm-line); }
.svm-sitios__titulo { font-size: var(--svm-text); }
.svm-sitios__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--svm-space-2); }
.svm-sitios__lista a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--svm-space-3); border: var(--svm-border) solid var(--svm-line-strong); border-radius: var(--svm-radius); background: var(--svm-surface); color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; font-size: var(--svm-small); }
.svm-sitios__lista a:hover { color: var(--svm-link-hover); border-color: var(--svm-accent); }
@media (min-width: 1024px) { .svm-hermanas__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ============ 14. Aviso de envío y disponibilidad ============ */
.svm-aviso { background: var(--svm-aviso-bg); color: var(--svm-aviso-ink); border: var(--svm-border) solid var(--svm-aviso-line); border-radius: var(--svm-radius); padding: var(--svm-space-3) var(--svm-space-4); margin: 0; max-width: 70ch; }
.svm-aviso strong { font-family: var(--svm-font-display); font-weight: var(--svm-peso-medio); letter-spacing: 0.02em; }
.svm-aviso--envio { background: var(--svm-envio-bg); color: var(--svm-envio-ink); border-color: var(--svm-line); }
.svm-aviso--compacto { padding: var(--svm-space-2) var(--svm-space-3); font-size: var(--svm-small); }

/* ============ 15. Tarjeta de categoría ============ */
.svm-cat { background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); display: flex; flex-direction: column; min-width: 0; }
.svm-cat__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--svm-surface); border-bottom: var(--svm-border) solid var(--svm-line); }
.svm-cat__body { padding: 10px var(--svm-space-3) var(--svm-space-3); display: flex; flex-direction: column; gap: var(--svm-space-1); flex: 1; }
.svm-cat__name { font-family: var(--svm-font-display); font-size: 17px; line-height: 1.2; font-weight: var(--svm-peso-negrita); margin: 0; }
.svm-cat__linea { font-size: var(--svm-small); color: var(--svm-ink-2); margin: 0; }
.svm-cat__link { margin-top: auto; padding-top: var(--svm-space-1); color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--svm-peso-medio); display: inline-flex; align-items: center; min-height: 36px; }
.svm-cat__link:hover { color: var(--svm-link-hover); }

/* ============ 16. Artículo de guía ============ */
.svm-guia { display: grid; gap: var(--svm-space-5); padding-top: var(--svm-space-4); padding-bottom: var(--svm-space-6); }
.svm-guia__indice { background: var(--svm-bg-2); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); padding: var(--svm-space-3) var(--svm-space-4); align-self: start; }
.svm-guia__indice ol { margin: 0; padding-left: 1.4em; display: grid; gap: 2px; }
.svm-guia__indice a { color: var(--svm-link); display: inline-flex; align-items: center; min-height: 32px; }
.svm-guia__cuerpo { min-width: 0; max-width: none; }
.svm-guia__cuerpo p, .svm-guia__cuerpo h2, .svm-guia__cuerpo ul, .svm-guia__cuerpo ol { max-width: 70ch; }
.svm-guia__cuerpo .svm-tablewrap { margin: 0 0 var(--svm-space-3); }
/* En celular, la columna de texto cabe junto a la primera, que queda fija */
.svm-guia__cuerpo .svm-table .svm-texto { min-width: 160px; }
/* Tarjetas de señal (07) y de modelo (06) dentro de una guía: sin la sangría de las listas de texto, y con todo el ancho, como las tablas */
.svm-prose .svm-grid, .svm-prose .svm-signs, .svm-prose .svm-chips { margin: 0; padding: 0; }
.svm-guia__cuerpo .svm-signs, .svm-guia__cuerpo .svm-grid { max-width: none; margin-bottom: var(--svm-space-3); }
.svm-guia__cuerpo .svm-sign__name { max-width: none; }
.svm-guia__cuerpo .svm-h3 { margin-top: var(--svm-space-4); }
.svm-guia__cuerpo h2 { scroll-margin-top: var(--svm-space-5); margin-top: var(--svm-space-5); }
.svm-guia__cuerpo h2:first-child { margin-top: 0; }
.svm-guia__meta { color: var(--svm-ink-3); font-size: var(--svm-small); margin: 0 0 var(--svm-space-4); }
.svm-guia__links, .svm-prose .svm-guia__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--svm-space-2); }
.svm-guia__links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--svm-space-3); border: var(--svm-border) solid var(--svm-line-strong); border-radius: var(--svm-radius); color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; }
.svm-guia__links a:hover { color: var(--svm-link-hover); border-color: var(--svm-accent); }
.svm-forma { display: inline-flex; align-items: center; gap: var(--svm-space-2); }
.svm-forma .svm-picto { width: 32px; height: 32px; }
@media (min-width: 1024px) { .svm-guia { grid-template-columns: 260px minmax(0, 1fr); } .svm-guia__indice { position: sticky; top: var(--svm-space-4); } .svm-guia__cuerpo .svm-signs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ============ 17. Tarjeta de obra (boceto) ============ */
.svm-obras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-gap); grid-template-columns: 1fr; }
.svm-obra { background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); display: grid; grid-template-columns: 120px 1fr; min-width: 0; }
.svm-obra__img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--svm-bg-2); border-right: var(--svm-border) solid var(--svm-line); }
.svm-obra__body { padding: var(--svm-space-3); display: grid; gap: 2px; align-content: start; }
.svm-obra__lugar { font-family: var(--svm-font-display); font-size: 17px; font-weight: var(--svm-peso-negrita); margin: 0; }
.svm-obra__meta { font-size: var(--svm-small); color: var(--svm-ink-2); margin: 0; }
.svm-obra__meta dt { display: inline; color: var(--svm-ink-3); }
.svm-obra__meta dd { display: inline; margin: 0; }
.svm-obra__meta dd::after { content: "\A"; white-space: pre; }
@media (min-width: 720px) { .svm-obras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svm-obras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============ 18. Tarjeta de guía ============ */
.svm-guias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--svm-gap); grid-template-columns: 1fr; }
.svm-tguia { background: var(--svm-surface); border: var(--svm-border) solid var(--svm-line); border-radius: var(--svm-radius); padding: var(--svm-space-4); display: flex; flex-direction: column; gap: var(--svm-space-1); min-width: 0; }
.svm-tguia__name { font-family: var(--svm-font-display); font-size: 17px; line-height: 1.2; font-weight: var(--svm-peso-negrita); margin: 0; }
.svm-tguia__linea { font-size: var(--svm-small); color: var(--svm-ink-2); margin: 0; }
.svm-tguia__link { margin-top: auto; padding-top: var(--svm-space-1); color: var(--svm-link); text-decoration: underline; text-underline-offset: 2px; font-weight: var(--svm-peso-medio); display: inline-flex; align-items: center; min-height: 36px; }
.svm-tguia__link:hover { color: var(--svm-link-hover); }
@media (min-width: 720px) { .svm-guias { grid-template-columns: repeat(3, minmax(0, 1fr)); } }