/* ============================================================
   seo.css — estilos de las paginas SEO (perfil, linea, indice).

   Reusa los mismos tokens de color y tipografia del catalogo
   actual para que las paginas nuevas no parezcan otro sitio.
   La portada sigue usando su CSS propio embebido, intacto.
   ============================================================ */

:root {
  --bg: #f5f3ec;
  --panel: #fdfcf9;
  --ink: #14171c;
  --ink-soft: #5b6270;
  --ink-xsoft: #9aa1ac;
  --border: #e3ddcc;
  --border-soft: #eae5d8;
  --side-bg: #12181f;
  --side-text: #c7cbd1;
  --side-text-dim: #838a96;
  --side-border: #262e38;
  --accent: #e8883a;
  --accent-ink: #552b0d;
  --blueprint: #2c5c82;
  --blueprint-wash: rgba(44, 92, 130, 0.07);
  /* Verde WhatsApp oscurecido lo justo para que el texto blanco de
     14px en negrita llegue a 4.97:1 de contraste. Con el #1f8f4e
     anterior daba 4.12:1 y no alcanzaba el minimo de WCAG AA. */
  --whatsapp: #1b8046;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  --ancho: 1080px;
  /* Ancho del contenido de una ficha de perfil. Mas angosto que el
     contenedor general: una ficha es una lectura enfocada, no un
     listado. */
  --ancho-ficha: 860px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blueprint); }
a:hover { color: var(--accent-ink); }

img { max-width: 100%; height: auto; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* --- barra superior --- */
.topbar {
  background: var(--side-bg);
  border-bottom: 1px solid var(--side-border);
}
.topbar .contenedor {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  flex-wrap: wrap;
}
.topbar a { color: var(--side-text); text-decoration: none; font-size: 13px; font-weight: 600; }
.topbar a:hover { color: #fff; }
/* El logo oficial (public/assets/logo_bienvenida.png, el mismo que
   usa la portada) es vertical y de
   tinta azul oscura sobre fondo transparente: sobre la barra negra
   no se leeria. Va sobre una pastilla clara, que es como se presenta
   la marca en fondos oscuros. El archivo no se modifica. */
.topbar .marca {
  margin-right: auto;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 3px 10px;
  line-height: 0;
}
/* 46px y no 30: el logo es vertical (471x529), asi que a la altura
   tipica de un logo horizontal quedaria una estampilla de 27px de
   ancho con la palabra ALUOEST ilegible. A 46 la pastilla mide 52 y
   la barra sigue midiendo 59, igual que antes. */
.topbar .marca img { display: block; height: 46px; width: auto; }
/* Con tres enlaces el header no entra en una fila de 375px. En vez
   de achicar la tipografía o dejarlo partido en dos filas, el último
   usa su etiqueta corta. El destino y el orden no cambian. */
.nav-corto { display: none; }
@media (max-width: 560px) {
  .topbar .contenedor { gap: 12px; }
  .nav-largo { display: none; }
  .nav-corto { display: inline; }
}

/* --- breadcrumbs --- */
.breadcrumb { font-size: 13px; color: var(--ink-soft); padding: 18px 0 4px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li::after { content: '›'; margin-left: 6px; color: var(--ink-xsoft); }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb li[aria-current] { color: var(--ink); font-weight: 600; }

/* --- titulos --- */
h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
  margin: 10px 0 6px;
  letter-spacing: -0.01em;
}
.subtitulo { font-size: 17px; color: var(--ink-soft); margin: 0 0 22px; max-width: 62ch; }
h2 { font-size: 19px; margin: 34px 0 14px; letter-spacing: -0.005em; }

/* --- ficha de perfil ---
   El bloque imagen + datos + WhatsApp se centra y se acota. Con el
   ancho completo del contenedor (1080px) quedaba estirado de punta a
   punta; 860px lo compacta de verdad y deja aire a los costados.

   Las dos columnas van iguales (1fr / 1fr) para que se lean como dos
   tarjetas del mismo peso, como en un catalogo impreso. La imagen NO
   se achica: mide 337px de ancho y la columna le da ~417px, asi que
   sigue entrando a tamano natural. */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  justify-content: center;
  max-width: var(--ancho-ficha);
  margin-inline: auto;
}
/* Todo el contenido de la ficha comparte el mismo eje y el mismo
   ancho, para que no queden bloques con margenes distintos uno
   debajo del otro. */
.breadcrumb,
article > h1,
article > .subtitulo,
article > .volver,
article > section { max-width: var(--ancho-ficha); margin-inline: auto; }
article > h1,
article > .subtitulo { width: 100%; }

@media (max-width: 780px) {
  .ficha { grid-template-columns: 1fr; gap: 20px; }
}

/* --- desktop de poca altura (tipico 1366x768) ---
   Con la barra de Chrome y la del sistema, en un monitor de 768px de
   alto quedan unos 620-640px visibles. Con los margenes normales el
   boton de WhatsApp caia por debajo de ese corte.

   Se compactan ESPACIOS, no tipografias: el titulo, el codigo y los
   datos conservan su tamano. Lo unico que se achica es el dibujo, y
   solo aca: con object-fit: contain no se deforma. En pantallas mas
   altas todo queda como estaba. */
@media (min-width: 900px) and (max-height: 800px) {
  .breadcrumb { padding: 10px 0 2px; }
  h1 { margin: 4px 0 4px; }
  .subtitulo { margin-bottom: 14px; }
  .ficha { gap: 22px; }
  .ficha-img { min-height: 0; padding: 10px; }
  .ficha-img img { max-height: 46vh; width: auto; height: auto; object-fit: contain; }
  .datos th, .datos td { padding: 8px 16px; }
  .panel-datos .consulta-integrada { padding: 12px 16px 14px; }
  .panel-datos .consulta-integrada p { margin-bottom: 11px; }
}

.ficha-img {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.ficha-img img { display: block; }
.ficha-img .sinimg { color: var(--ink-xsoft); font-size: 13px; text-align: center; }

/* La leyenda va pegada al dibujo, adentro del mismo figure: es el
   texto que un buscador toma como contexto de la imagen, y para una
   persona dice de un vistazo que esta mirando. El figure pasa a
   columna para que quede debajo y no al costado. */
.ficha-img { flex-direction: column; gap: 10px; }
.ficha-leyenda {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
  max-width: 46ch;
}

/* Panel derecho: UNA sola tarjeta. Arriba los datos, abajo el CTA,
   separados por una linea. Antes eran dos cajas con borde propio y
   18px de aire entre medio, y el CTA se leia como un bloque pegado
   despues de la ficha en vez de formar parte de ella. */
.panel-datos {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.panel-datos .datos { border: 0; border-radius: 0; background: none; }
/* El prefijo .panel-datos no es decorativo: sin el, .consulta gana
   por orden de fuente y vuelven el borde, el margen y el padding de
   la caja suelta. */
.panel-datos .consulta-integrada {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  padding: 15px 16px 17px;
  background: var(--bg);
}

.datos { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.datos table { width: 100%; border-collapse: collapse; }
.datos th, .datos td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); font-size: 14px; vertical-align: top; }
.datos tr:last-child th, .datos tr:last-child td { border-bottom: 0; }
.datos th { color: var(--ink-soft); font-weight: 600; width: 38%; }
.datos td { font-weight: 600; }
.datos .codigo { font-family: var(--mono); font-size: 16px; letter-spacing: 0.02em; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--blueprint-wash);
  color: var(--blueprint);
  text-decoration: none;
}
a.badge:hover { border-color: var(--blueprint); }

/* --- volver al catálogo --- */
.volver { margin: 0 0 2px; font-size: 13.5px; }
.volver a { text-decoration: none; font-weight: 600; }
.volver a:hover { text-decoration: underline; }

/* --- imagen ampliable --- */
.abrir-visor {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  position: relative;
  display: block;
  width: 100%;
}
.abrir-visor img { display: block; margin: 0 auto; }
/* Sin etiqueta visible: la afordancia es el cursor de lupa. El boton
   conserva su aria-label, asi que por teclado y lector de pantalla
   se sigue anunciando que la imagen se puede ampliar. */

/* --- visor ampliado --- */
.visor { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.visor[hidden] { display: none; }
.visor-fondo { position: absolute; inset: 0; background: rgba(10, 14, 19, 0.88); }
.visor-marco {
  position: relative;
  margin: 0;
  max-width: min(94vw, 1400px);
  max-height: 94vh;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.visor-marco img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}
/* Dibujo en HD (hoy, Frente Integral 50): ocupa lo que haya, hasta
   1400 px de marco, sin pasarse del alto de la ventana y sin
   deformarse: el ancho sale del menor de los tres topes y el alto de
   la proporcion real de la HD (--ar, que escribe el build). El
   tamaño no depende de cual de las dos imagenes este cargada, asi
   que al llegar la HD no se mueve nada. Las imagenes sin HD siguen
   con la regla de arriba: a su tamaño natural, nunca estiradas. */
.visor-marco img.visor-hd {
  width: min(calc(1400px - 24px), calc(94vw - 24px), calc((94vh - 64px) * var(--ar)));
  height: auto;
  max-width: none;
  max-height: none;
}
.visor-marco figcaption { font-size: 11.5px; color: var(--ink-xsoft); text-align: center; }
.visor-cerrar {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
}
.visor-cerrar:hover { background: #fff; }
@media (max-width: 700px) {
  .visor-marco figcaption { display: none; }
}

/* --- bloque comercial --- */
.consulta {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px 20px;
}
.consulta h2 { margin: 0 0 4px; font-size: 16px; }
.consulta p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; }

/* Variante para las paginas de linea: el CTA va arriba de la grilla,
   asi que el texto y el boton comparten fila y no empujan la lista.
   En pantallas chicas se apila como el de la ficha. */
.consulta-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 24px;
}
.consulta-fila p { margin: 0; }
@media (max-width: 640px) {
  .consulta-fila { display: block; }
  .consulta-fila p { margin-bottom: 14px; }
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--whatsapp);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 100px;
  /* Con el padding solo daba 43,7px: por debajo del minimo tactil.
     No se deja librado a la metrica de la fuente. */
  min-height: 44px;
}
.btn-wa:hover { background: #17743e; color: #fff; }

/* --- comparar ---
   Jerarquía deliberada: WhatsApp es el CTA comercial y va relleno;
   Comparar es una función secundaria y va con borde, sin relleno y
   más chico. Nunca compiten por la misma atención. */
.consulta-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Botón secundario "de verdad": borde de 2px y texto en negrita, en
   el azul técnico del sitio. Se lee como control, no como una nota
   al pie, y sigue sin competir con WhatsApp, que es el único
   relleno macizo de la ficha. Azul y no verde a propósito.
   Contraste del texto y del borde sobre el panel: 6.9:1. */
.btn-comparar {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--blueprint);
  border-radius: 100px;
  background: transparent;
  color: var(--blueprint);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.btn-comparar:hover { background: var(--blueprint-wash); }
/* Ya elegido: relleno azul. Es un estado, no una llamada a la
   acción, y el blanco sobre este azul da 7.1:1. */
.btn-comparar.elegido { background: var(--blueprint); border-color: var(--blueprint); color: #fff; }
.btn-comparar.elegido:hover { background: #24496a; border-color: #24496a; }
.btn-comparar[hidden] { display: none; }

.compara-grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
  max-width: var(--ancho-ficha);
  margin: 6px auto 0;
}
.compara-grilla[hidden] { display: none; }
.compara-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.compara-titulo {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.compara-rotulo { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-xsoft); }
.compara-codigo { font-family: var(--mono); font-weight: 700; font-size: 17px; }
/* Los dos contenedores miden igual para que la comparación visual
   sea pareja. El dibujo entra completo con contain: no se recorta ni
   se deforma, y el archivo no se toca. */
.compara-img {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-soft);
}
.compara-img .abrir-visor { height: 100%; display: flex; align-items: center; justify-content: center; }
.compara-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.compara-img .sinimg { color: var(--ink-xsoft); font-size: 13px; text-align: center; padding: 0 12px; }
.compara-col .datos { border: 0; border-radius: 0; background: none; }
.compara-ficha {
  display: block;
  padding: 13px 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.compara-ficha:hover { text-decoration: underline; }

/* --- selector de /comparar ---
   La herramienta se usa sola: se entra por el header y se eligen los
   dos perfiles acá, con el mismo buscador del catálogo. */
.selector-doble {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  max-width: var(--ancho-ficha);
  margin: 6px auto 24px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.selector-doble[hidden] { display: none; }
.selector-titulo {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-xsoft);
}
.selector-label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.selector-campo input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
}
.selector-campo input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.selector-cuenta { margin: 7px 0 0; font-size: 12.5px; color: var(--ink-xsoft); }
.selector-cuenta:empty { margin: 0; }
.selector-resultados {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}
.selector-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--bg);
}
.selector-opcion > div { display: flex; flex-direction: column; min-width: 0; }
.selector-codigo { font-family: var(--mono); font-weight: 700; font-size: 14.5px; }
.selector-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.selector-lineas { font-size: 11.5px; color: var(--ink-xsoft); margin-top: 2px; }
.selector-elegir,
.selector-cambiar {
  appearance: none;
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--blueprint);
  border-radius: 100px;
  background: transparent;
  color: var(--blueprint);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.selector-elegir:hover,
.selector-cambiar:hover { background: var(--blueprint-wash); }
.selector-mas { font-size: 12px; color: var(--ink-xsoft); padding: 4px 10px; }
.selector-elegido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--blueprint);
  border-radius: 8px;
  background: var(--blueprint-wash);
}
.selector-elegido[hidden] { display: none; }
.selector-elegido .selector-cambiar { margin-top: 6px; }
.selector-accion {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}
.selector-accion .btn-comparar-ir {
  appearance: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  margin-top: 14px;
}
.selector-accion .btn-comparar-ir:disabled {
  background: var(--border);
  color: var(--ink-xsoft);
  cursor: not-allowed;
}
.selector-ayuda { margin: 0; font-size: 12.5px; color: var(--ink-xsoft); }
.selector-ayuda:empty { display: none; }

@media (max-width: 780px) {
  .selector-doble { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .selector-accion .btn-comparar-ir { width: 100%; justify-content: center; }
}

.compara-estado {
  max-width: var(--ancho-ficha);
  margin: 6px auto 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
}
.compara-estado[hidden] { display: none; }
.compara-estado p { margin: 0 0 12px; color: var(--ink-soft); font-size: 14.5px; }
.compara-estado p:last-child { margin-bottom: 0; }
.compara-nota {
  max-width: var(--ancho-ficha);
  margin: 16px auto 0;
  font-size: 12.5px;
  color: var(--ink-xsoft);
  line-height: 1.5;
}
.compara-nota[hidden] { display: none; }

/* En un teléfono dos columnas quedarían diminutas: se apila y se
   compara desplazándose. */
@media (max-width: 780px) {
  .compara-grilla { grid-template-columns: 1fr; gap: 16px; }
  .compara-img { height: 240px; }
}
.btn-wa svg { width: 17px; height: 17px; fill: currentColor; }

/* Perfiles que se usan en varios sistemas: el listado de líneas es
   el contenido principal de la página, no un anexo. */
.lineas-destacado { border-left: 3px solid var(--blueprint); padding-left: 16px; margin-top: 26px; }
.lineas-destacado h2 { margin-top: 0; }

/* --- grillas de perfiles --- */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  height: 100%;
}
.tarjeta:hover { border-color: var(--blueprint); color: inherit; }
/* 11/12 ≈ 0.917 es la proporción real de los dibujos del catálogo
   (513 × 559 en 559 de las 566 imágenes). Con una caja 4/3 el dibujo
   quedaba centrado con barras a los costados y se pintaba al 68% del
   área disponible; con la proporción propia ocupa casi todo y la
   sección se lee mucho mejor. object-fit:contain sigue protegiendo a
   las pocas imágenes que tienen otra medida. */
.tarjeta-img { aspect-ratio: 11 / 12; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid var(--border-soft); overflow: hidden; }
.tarjeta-img img { max-height: 100%; object-fit: contain; }
.tarjeta-img .sinimg { color: var(--ink-xsoft); font-size: 11px; }
.tarjeta-cuerpo { padding: 10px 12px 12px; }
.tarjeta-codigo { font-family: var(--mono); font-weight: 700; font-size: 15px; }
.tarjeta-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
.tarjeta-kg { font-size: 11.5px; color: var(--ink-xsoft); font-family: var(--mono); margin-top: 4px; }

/* --- indice compacto --- */
.indice { columns: 260px 4; column-gap: 26px; list-style: none; padding: 0; margin: 0; }
.indice li { break-inside: avoid; margin-bottom: 5px; font-size: 13.5px; }
.indice a { text-decoration: none; }
.indice a:hover { text-decoration: underline; }
.indice .cod { font-family: var(--mono); font-weight: 700; }
.indice .dsc { color: var(--ink-soft); }

/* --- lineas --- */
.lineas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.linea-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}
.linea-card:hover { border-color: var(--blueprint); color: inherit; }
.linea-card strong { display: block; font-size: 15px; }
.linea-card span { font-size: 12.5px; color: var(--ink-soft); }

/* --- footer --- */
.pie { margin-top: 54px; background: var(--side-bg); color: var(--side-text-dim); padding: 30px 0 34px; font-size: 13px; }
.pie h2 { color: var(--side-text); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; }
.pie ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pie a { color: var(--side-text); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .legal { border-top: 1px solid var(--side-border); padding-top: 16px; }

section { scroll-margin-top: 20px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- complementos ---
   Un complemento no es un perfil de aluminio del catálogo: es una
   pieza auxiliar que algunas líneas usan. La etiqueta lo dice sin
   gritarlo, con el azul técnico que ya usa el sitio. */
.insignia-complemento {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--blueprint);
  border-radius: 100px;
  background: var(--blueprint-wash);
  color: var(--blueprint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.variantes { max-width: var(--ancho-ficha); margin-inline: auto; }
.variantes p { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; }
.variantes .cod { font-family: var(--mono); font-weight: 700; }

/* Sección "Complementos" de una página de línea: va después de la
   grilla de perfiles y agrupa por geometría, no por código. */
.complementos-linea { max-width: var(--ancho-ficha); margin: 30px auto 0; }
.complementos-linea > p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; }
.complemento-grupo {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.complemento-grupo h3 { margin: 0 0 4px; font-size: 15px; }
.complemento-grupo .desc { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); }
.complemento-largos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.complemento-largos a { font-size: 13.5px; text-decoration: none; }
.complemento-largos a:hover { text-decoration: underline; }
.complemento-largos .cod { font-family: var(--mono); font-weight: 700; }
.complemento-grupo h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.complemento-nombre { font-weight: 600; font-size: 14.5px; }

/* Una línea puede usar complementos de más de un material —A40 RPT
   usa PVC y poliamida— y ahí el material deja de ser un detalle de
   cada tarjeta para ser lo que separa un grupo del otro. */
.complemento-material { margin: 0 0 18px; }
/* --- catálogo preliminar ---
   Aluar sella algunos catálogos "VERSIÓN PRELIMINAR". El dato no
   está mal: está sujeto a revisión. Por eso la nota es gris y
   discreta, como las demás aclaraciones de la ficha, y no roja ni
   con ícono de error: un cartel de alerta le haría creer a quien
   mira que el perfil tiene un problema. */
.aviso-preliminar {
  margin: 12px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--border-fuerte, #c9ccd1);
  background: var(--panel, #f7f7f5);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.aviso-preliminar b { color: var(--ink); font-weight: 600; }
/* En la página de línea va suelta, arriba de la grilla. */
h1 + .subtitulo + .aviso-preliminar { max-width: 70ch; margin: 0 0 16px; }
/* En la ficha va dentro de la tarjeta de datos, sin borde propio. */
.panel-datos .aviso-preliminar {
  margin: 0;
  border-left: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  padding: 11px 16px 0;
}

.complemento-material > h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.complemento-material .complemento-grupo h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 4px;
  font-size: 15px;
}
.compara-nota-grupo {
  max-width: var(--ancho-ficha);
  margin: 0 auto 16px;
  padding: 11px 14px;
  border: 1px solid var(--blueprint);
  border-left: 3px solid var(--blueprint);
  border-radius: var(--radius);
  background: var(--blueprint-wash);
  color: var(--ink);
  font-size: 13.5px;
}
.compara-nota-grupo[hidden] { display: none; }