/* =====================================================================
   legales.css — los cuatro documentos legales de las dos marcas

   Términos y privacidad, por duplicado para Metalco CNC y para Metalco
   Medieval. Antes cada uno llevaba su propio <style> en la cabecera:
   cuatro copias de la misma hoja que ya habían empezado a separarse.
   El azul de CNC era #00bfff en un archivo y #0099cc en el hover; el oro
   de Medieval era #cbb26a, un tono que no aparece en ninguna otra página
   del sitio (el de la marca es #d4af37). Aquí hay una sola hoja y la
   marca la decide data-marca en <html>.

   Depende de sistema.css. Lo propio de esta hoja es una sola cosa:
   componer prosa larga para que se lea. Medida en ch, interlineado 1.7,
   jerarquía de encabezados que se distingue de un vistazo, índice pegado
   en cuanto hay ancho para él, y un documento que sale legible por la
   impresora, que es como termina de leerse un contrato.

   Tres media queries en total: el índice pegado, la cabecera estrecha y
   la impresión. Todo lo demás escala con clamp().
   ===================================================================== */

/* Medida de lectura. Un contrato se lee de arriba abajo y sin pausas: a
   partir de unos 70 caracteres el ojo pierde el salto de línea y hay que
   releer el renglón. En 1440 px el texto a todo el ancho serían 150. */
.legal {
  --medida: 68ch;

  /* El cuerpo del documento no va en gris de metadato: es el texto que
     hay que leer entero. Se mezcla el color de marca con el humo para
     que baje un punto respecto de los titulares sin perder contraste
     (papel cálido en Medieval, tinta fría en CNC). */
  --prosa: color-mix(in srgb, var(--m-texto) 65%, var(--m-humo));
}

body {
  margin: 0;
  background: var(--m-negro-1);
  color: var(--m-texto);
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Ancla de salto para el teclado: primera parada del tabulador. */
.saltar {
  position: absolute;
  left: var(--m-esp-sm);
  top: -4rem;
  z-index: var(--m-capa-modal);
  padding: var(--m-esp-2xs) var(--m-esp-sm);
  background: var(--m-negro-3);
  color: var(--m-acento-claro);
  border: 1px solid var(--m-acento);
  border-radius: var(--m-radio-sm);
  text-decoration: none;
  transition: top var(--m-rapido) var(--m-salida);
}

.saltar:focus {
  top: var(--m-esp-sm);
}

/* =====================================================================
   Cabecera

   Idéntica a la de la página de referencias históricas: mismo alto,
   mismo glifo, misma frase de vuelta. El sitio tiene que sentirse uno
   solo también cuando el visitante cae en la letra pequeña.
   ===================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--m-capa-cabecera);
  display: flex;
  align-items: center;
  gap: var(--m-esp-sm);
  padding: var(--m-esp-2xs) var(--m-canal);
  background: color-mix(in srgb, var(--m-negro-0) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid color-mix(in srgb, var(--m-acento) 20%, transparent);
}

.cabecera__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--m-esp-2xs);
  font-family: var(--m-titular);
  font-size: var(--m-txt-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--m-acento-claro);
  text-decoration: none;
  white-space: nowrap;
}

.cabecera__marca svg {
  width: 1.6em;
  height: 1.6em;
  flex: none;
  color: var(--m-acento);
}

.cabecera__volver {
  margin-inline-start: auto;
  font-size: var(--m-txt-sm);
  color: var(--m-humo);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--m-esp-2xs);
}

.cabecera__volver:hover {
  color: var(--m-acento-claro);
}

/* En 390 px la cabecera son tres elementos peleando por 350 px de ancho
   útil. Lo primero que sobra es la mitad de la frase de vuelta. */
@media (max-width: 30rem) {
  .cabecera__volver-largo {
    display: none;
  }
}

/* =====================================================================
   Portada del documento

   Antetítulo, título, fecha de vigencia y el corte de la casa. La fecha
   no es un pie de página: en un documento legal es el dato que decide
   qué versión rige, así que va arriba y con la forma de una placa.
   ===================================================================== */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--m-esp-lg) var(--m-esp-xl);
}

.legal__portada {
  text-align: center;
  padding-block-end: var(--m-esp-md);
}

.legal__titulo {
  margin: var(--m-esp-sm) 0 0;
  font-family: var(--m-titular);
  font-size: var(--m-txt-2xl);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--m-texto);
  text-wrap: balance;
}

.legal__fecha {
  display: inline-block;
  margin: var(--m-esp-sm) 0 0;
  padding: var(--m-esp-3xs) var(--m-esp-sm);
  border: 1px solid color-mix(in srgb, var(--m-acento) 25%, transparent);
  border-radius: 999px;
  font-size: var(--m-txt-xs);
  letter-spacing: 0.08em;
  color: var(--m-humo);
  font-variant-numeric: tabular-nums;
}

.legal__corte {
  margin-block-start: var(--m-esp-md);
}

/* =====================================================================
   Índice

   Once secciones numeradas son once pantallas de móvil. Sin índice, la
   única forma de llegar a «Garantía legal» es bajar y leerlo todo.

   La misma lista sirve de dos maneras: en pantalla ancha se pega a la
   izquierda y acompaña la lectura; en estrecha se pliega en columnas y
   ocupa lo que ocuparía un párrafo. No hay dos marcados ni dos listas.
   ===================================================================== */
.indice {
  padding-block-end: var(--m-esp-lg);
}

.indice__titulo {
  margin: 0 0 var(--m-esp-xs);
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-humo-tenue);
}

.indice__lista {
  display: grid;
  gap: var(--m-esp-3xs);
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.indice__lista a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;          /* 44 px: el mínimo que un dedo acierta */
  padding: var(--m-esp-3xs) var(--m-esp-xs);
  border-inline-start: 2px solid color-mix(in srgb, var(--m-acento) 20%, transparent);
  color: var(--m-humo);
  font-size: var(--m-txt-sm);
  line-height: 1.3;
  text-decoration: none;
  text-wrap: pretty;
  transition:
    color var(--m-rapido) var(--m-entrada),
    border-color var(--m-rapido) var(--m-entrada),
    background var(--m-rapido) var(--m-entrada);
}

.indice__lista a:hover,
.indice__lista a:focus-visible {
  color: var(--m-texto);
  border-inline-start-color: var(--m-acento);
  background: color-mix(in srgb, var(--m-acento) 8%, transparent);
}

/* =====================================================================
   El texto

   Sin tarjetas. El diseño anterior metía cada sección en un panel con
   borde, sombra y 30 px de relleno; con once secciones el documento se
   leía como once cajas sueltas y no como un contrato seguido. Aquí las
   secciones se separan con el corte de la casa, que es lo que separa
   todo lo demás en el sitio.
   ===================================================================== */
.legal__texto {
  min-width: 0;
}

.legal__seccion {
  padding-block-start: var(--m-esp-lg);
  scroll-margin-top: 5.5rem;
}

/* Al llegar desde el índice, la sección de destino se enciende un punto
   por el lado del corte. Sin desplazar nada: es un fondo, no un borde. */
.legal__seccion:target {
  background: radial-gradient(
    75% 40% at 0% 0%,
    color-mix(in srgb, var(--m-acento) 10%, transparent),
    transparent 70%
  );
}

.legal__h2 {
  margin: 0 0 var(--m-esp-xs);
  font-family: var(--m-titular);
  font-size: var(--m-txt-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--m-acento-claro);
  text-wrap: balance;
}

.legal__seccion .m-corte {
  margin-block-end: var(--m-esp-md);
}

.legal__texto p {
  margin: 0 0 var(--m-esp-sm);
  max-width: var(--medida);
  color: var(--prosa);
  line-height: 1.7;
  text-wrap: pretty;
}

.legal__texto p:last-child {
  margin-block-end: 0;
}

.legal__texto strong {
  color: var(--m-texto);
  font-weight: 600;
}

.legal__texto a {
  color: var(--m-acento-claro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.legal__texto a:hover {
  color: var(--m-texto);
}

.legal__texto ul {
  margin: 0 0 var(--m-esp-sm);
  padding-inline-start: 1.4em;
  max-width: var(--medida);
  color: var(--prosa);
}

.legal__texto li {
  margin-block-end: var(--m-esp-2xs);
  line-height: 1.7;
}

.legal__texto li::marker {
  color: var(--m-acento);
}

/* ── Lista de datos ─────────────────────────────────────────────────
   Las listas donde cada punto es un par «qué es → qué se hace con eso»
   son una tabla escrita en prosa: etiqueta, dos puntos, contenido. En
   móvil una tabla de verdad obligaría a desplazar en horizontal, así que
   la fila se apila —etiqueta arriba, dato debajo— igual que la placa de
   datos del sistema, y se lee sin girar el teléfono. */
.legal__datos {
  display: grid;
  gap: var(--m-esp-xs);
  padding-inline-start: 0;
  list-style: none;
}

.legal__datos > li {
  margin: 0;
  padding: var(--m-esp-xs) var(--m-esp-sm);
  border-inline-start: 2px solid color-mix(in srgb, var(--m-acento) 40%, transparent);
  border-radius: 0 var(--m-radio-sm) var(--m-radio-sm) 0;
  background: color-mix(in srgb, var(--m-acento) 5%, transparent);
}

.legal__datos > li > strong:first-child {
  display: block;
  margin-block-end: var(--m-esp-3xs);
  color: var(--m-acento-claro);
  font-size: var(--m-txt-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* =====================================================================
   Pie
   ===================================================================== */
.pie {
  margin-block-start: var(--m-esp-xl);
  padding: var(--m-esp-lg) var(--m-canal);
  border-block-start: 1px solid color-mix(in srgb, var(--m-acento) 18%, transparent);
  text-align: center;
  color: var(--m-humo-tenue);
  font-size: var(--m-txt-sm);
}

.pie p {
  margin: 0 0 var(--m-esp-3xs);
}

.pie p:last-child {
  margin-block-end: 0;
}

.pie a {
  color: var(--m-humo);
}

.pie a:hover {
  color: var(--m-acento-claro);
}

/* El enlace al documento que ya se está leyendo no lleva a ninguna parte:
   se marca en vez de disimularlo. */
.pie a[aria-current='page'] {
  color: var(--m-acento-claro);
  text-decoration: none;
  cursor: default;
}

/* =====================================================================
   Las dos marcas

   Hasta aquí, los cuatro documentos son el mismo documento: solo cambian
   el color de acento y la fuente del titular, que los pone sistema.css.
   Eso deja a Metalco Medieval leyéndose como una ficha industrial y a
   Metalco CNC con las esquinas blandas de una página de forja.

   Lo que sigue los separa, y solo eso. No se duplica ni una regla de
   composición: la medida de lectura, el índice pegado y la impresión son
   los mismos para los cuatro. Lo que cambia es el acabado.

   Todo con degradados y pseudoelementos. Ninguna imagen nueva.
   ===================================================================== */

/* ── La forja: grabado ──────────────────────────────────────────────
   El título va incidido —una sombra oscura debajo, un filo de oro
   encima—, cada apartado se abre con el rombo de la casa y las cajas de
   datos llevan la trama del grabado. Es el mismo vocabulario que usan el
   catálogo y la galería medieval, no un adorno inventado para aquí. */
[data-marca='medieval'] .legal__titulo {
  text-shadow:
    0 2px 0 rgb(0 0 0 / 0.75),
    0 -1px 0 color-mix(in srgb, var(--m-acento-claro) 22%, transparent);
}

/* El rombo cuelga en el margen, no empuja el título.
 *
 * Puesto en el flujo, el ornamento desplazaba el titular unos 20 px a la
 * derecha y lo descolgaba del texto del apartado, que arranca en el canto
 * del documento: el título dejaba de alinearse con su propio párrafo y
 * con la línea de corte que lleva debajo. El margen negativo devuelve la
 * caja a su sitio, así que el rombo queda fuera y las letras siguen
 * alineadas donde estaban.
 *
 * El tirón mide exactamente el rombo más su hueco —0,4 rem, dos píxeles
 * de trazo y --m-esp-2xs—, que en la pantalla más estrecha suma 16 px
 * contra los 20 del canal: el ornamento nunca se sale de la página.
 */
[data-marca='medieval'] .legal__h2 {
  display: flex;
  align-items: baseline;
  gap: var(--m-esp-2xs);
  margin-inline-start: calc((0.4rem + 2px + var(--m-esp-2xs)) * -1);
}

/* Un cuadro girado 45°, del tamaño de media equis, con el trazo del
   acento. `flex: none` para que no se deforme con el título largo.
 *
 * Sin `align-self`, hereda el `align-items: baseline` del titular y se
 * apoya en la primera línea. Centrado, en los dos epígrafes que ocupan
 * dos renglones —«El pacto de silencio: responsable del tratamiento»— el
 * rombo quedaba flotando en el hueco entre las dos, señalando a ninguna. */
[data-marca='medieval'] .legal__h2::before {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  rotate: 45deg;
  border: 1px solid var(--m-acento);
  background: color-mix(in srgb, var(--m-acento) 30%, transparent);
}

[data-marca='medieval'] .legal__datos > li {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 5px,
      color-mix(in srgb, var(--m-acento) 5%, transparent) 5px 6px
    ),
    color-mix(in srgb, var(--m-acento) 5%, transparent);
}

/* ── El taller: escuadra ────────────────────────────────────────────
   Lo contrario, y en el mismo sitio. La portada deja de estar centrada y
   se alinea al canto del documento, de modo que el antetítulo, el título,
   la fecha y el índice cuelgan todos de la misma vertical: una hoja de
   especificación, no una carátula. La fecha deja de ser una píldora y
   pasa a ser un sello rectangular, y los apartados respiran más. */
[data-marca='cnc'] .legal__portada {
  text-align: start;
}

[data-marca='cnc'] .legal__corte {
  margin-inline: 0;
}

[data-marca='cnc'] .legal__fecha {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--m-acento) 30%, transparent);
  border-inline-start-width: 2px;
  border-inline-start-color: var(--m-acento);
  letter-spacing: 0.1em;
}

[data-marca='cnc'] .indice__lista a {
  border-radius: 0;
}

/* Más aire entre apartados: en un documento sin ornamento, la separación
   es lo único que marca dónde empieza cada cosa. */
[data-marca='cnc'] .legal__seccion {
  padding-block-start: var(--m-esp-xl);
}

/* El realce del apartado al que se llega desde el índice era un degradado
   radial: una mancha con forma de nube en una página que quiere ser
   recta. Aquí es un filete en el canto, que es como se señala una línea
   en un plano. */
[data-marca='cnc'] .legal__seccion:target {
  background: none;
  box-shadow: inset 2px 0 0 var(--m-acento);
  padding-inline-start: var(--m-esp-sm);
}

/* =====================================================================
   Pantalla ancha: el índice se pega

   62rem es donde caben las dos columnas sin comerse la medida de lectura:
   18 rem de índice, el canal, y todavía 68ch de texto.
   ===================================================================== */
@media (min-width: 62rem) {
  .legal {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    column-gap: var(--m-esp-xl);
    align-items: start;
  }

  .legal__portada {
    grid-column: 1 / -1;
    padding-block-end: var(--m-esp-lg);
  }

  .indice {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-block-end: 0;
  }

  /* La primera sección no necesita separarse de nada: arranca a la altura
     del índice. */
  .legal__seccion:first-child {
    padding-block-start: 0;
  }
}

/* =====================================================================
   Impresión

   Un contrato acaba en papel o en PDF más veces que cualquier otra página
   del sitio. sistema.css ya apaga la atmósfera y deja el corte en una
   línea negra fina; aquí se completa: tinta negra sobre blanco, el índice
   fuera (los enlaces no sirven en papel), y ningún título huérfano al pie
   de una hoja.
   ===================================================================== */
@media print {
  @page {
    margin: 18mm 16mm;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .saltar,
  .cabecera,
  .indice {
    display: none;
  }

  .legal {
    display: block;
    padding-block: 0;
    --prosa: #000;
    --medida: none;
  }

  .legal__portada {
    text-align: start;
    padding-block-end: 0;
  }

  /* El antetítulo y su filete van en color de marca en pantalla; en papel
     una impresora en blanco y negro los deja en un gris que se lee peor
     que el negro. */
  .m-cinta {
    color: #000;
  }

  .m-cinta::before {
    background: #000;
  }

  .legal__titulo {
    font-size: 20pt;
    color: #000;
  }

  .legal__fecha {
    border-color: #999;
    color: #000;
  }

  .legal__seccion {
    padding-block-start: 14pt;
    background: none;
  }

  .legal__h2 {
    font-size: 13pt;
    color: #000;
    break-after: avoid;
  }

  /* En pantalla el corte separa; en papel ya separa el blanco. */
  .legal__seccion .m-corte {
    margin-block-end: 7pt;
  }

  .legal__texto strong {
    color: #000;
  }

  .legal__texto a {
    color: #000;
  }

  .legal__texto li::marker {
    color: #000;
  }

  .legal__datos > li {
    background: none;
    border-inline-start: 1pt solid #666;
    break-inside: avoid;
  }

  .legal__datos > li > strong:first-child {
    color: #000;
  }

  .pie {
    margin-block-start: 14pt;
    padding: 8pt 0 0;
    border-block-start: 0.5pt solid #999;
    color: #000;
    text-align: start;
  }

  /* El selector de pantalla lleva un atributo y gana por especificidad:
     hay que nombrarlo igual aquí en vez de recurrir a !important. */
  .pie a,
  .pie a[aria-current='page'] {
    color: #000;
  }

  /* ── El acabado de marca no se imprime ──────────────────────────
     Las reglas de las dos marcas llevan [data-marca] y pesan (0,2,0)
     contra los (0,1,0) de este bloque: sin nombrarlas aquí ganarían
     ellas y el papel saldría con lo que solo tiene sentido en pantalla.

     En la forja: la trama del grabado se imprime como una malla gris que
     se come el texto que hay encima, y la sombra del titular sale
     convertida en un contorno sucio. En el taller: el espaciado de
     pantalla entre apartados desperdicia media hoja por documento, y el
     realce del apartado de destino no significa nada en papel, donde no
     se llega desde un índice sino pasando páginas.

     Se conserva el rombo, que es un carácter más y sale como una viñeta
     —pero sin el margen negativo, que en papel descolgaría el epígrafe
     del texto—. */
  [data-marca='medieval'] .legal__titulo {
    text-shadow: none;
  }

  [data-marca='medieval'] .legal__h2 {
    margin-inline-start: 0;
  }

  [data-marca='medieval'] .legal__h2::before {
    border-color: #000;
    background: #000;
  }

  [data-marca='medieval'] .legal__datos > li {
    background: none;
  }

  [data-marca='cnc'] .legal__seccion {
    padding-block-start: 14pt;
  }

  [data-marca='cnc'] .legal__seccion:target {
    box-shadow: none;
    padding-inline-start: 0;
  }

  [data-marca='cnc'] .legal__fecha {
    border-color: #999;
  }
}


/* =====================================================================
   Pantallas de 320 px

   El nombre de la marca en Cinzel más el enlace de vuelta no caben en
   320 px y el segundo se salía por la derecha. Por debajo de 26 rem el
   nombre encoge y cede, y del enlace queda la flecha, que ya se entiende
   por su nombre accesible.
   ===================================================================== */
@media (max-width: 26rem) {
  .cabecera__marca {
    min-width: 0;
    font-size: var(--m-txt-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cabecera__volver-largo {
    display: none;
  }
}
