/* =====================================================================
   sistema.css — el sistema de diseño de Metalco

   Un solo archivo con los valores que antes estaban repetidos a mano en
   cada página: 48 apariciones de #0099ff, 42 de #d4af37, 36 de #ffb300 y
   ningún :root en las 7.157 líneas de CSS de la portada. Aquí se declaran
   una vez y las páginas los consumen.

   Las dos marcas comparten estructura y se diferencian por el color de
   la luz. No es una metáfora: la máquina de plasma corta con un arco
   azul y la fragua trabaja con hierro al rojo. Cada marca usa la luz que
   hace su propio taller.

       [data-marca="cnc"]       arco de plasma, azul
       [data-marca="medieval"]  oro de fragua

   Regla de convivencia: este archivo NO estiliza etiquetas (h1, p, div)
   salvo las cuatro correcciones del final, porque se carga junto al CSS
   antiguo de cada página y una regla de etiqueta ganaría donde no debe.
   Todo lo demás va con prefijo m- y se aplica solo donde se pide.
   ===================================================================== */

:root {
  /* ── Negros ────────────────────────────────────────────────────────
     Cinco, no uno. El sitio anterior mezclaba #0a0a0a, #050505, #111,
     #1a1a1a y #333 sin criterio; ahora forman una escala con la que se
     construye profundidad. */
  --m-negro-0: #050506;   /* fondo absoluto, el fondo del taller apagado */
  --m-negro-1: #0a0a0c;   /* fondo de página */
  --m-negro-2: #101013;   /* superficie elevada: tarjeta, panel */
  --m-negro-3: #17171b;   /* superficie sobre superficie: modal, menú */
  --m-negro-4: #22222a;   /* borde sólido, separador fuerte */

  /* ── Luz de cada marca ─────────────────────────────────────────── */
  --m-arco: #00bfff;          /* arco de plasma */
  /* Las dos guías CAD que barren la rejilla del hero industrial. Son
     tokens y no literales porque su color depende de sobre qué fondo caen,
     y la marca CNC cambia de fondo. */
  --m-guia: rgb(0 150 255 / 0.8);
  --m-guia-clara: rgb(0 255 255 / 0.8);
  --m-guia-halo: rgb(0 150 255 / 0.5);
  --m-arco-claro: #7fe3ff;    /* el centro del arco, casi blanco */
  --m-arco-hondo: #0a5f8f;    /* el azul cuando se apaga */

  --m-oro: #d4af37;           /* oro de la marca medieval */
  --m-oro-claro: #ffc247;     /* el brillo, no el color base */
  --m-oro-hondo: #8a6914;     /* oro en sombra, para bordes */
  --m-brasa: #b4451a;         /* hierro al rojo, acento secundario */

  /* ── Texto ─────────────────────────────────────────────────────── */
  --m-papel: #f4e4bc;         /* pergamino: texto principal medieval */
  --m-tinta: #eef2f7;         /* texto principal industrial */
  --m-humo: #a3a9b4;          /* texto secundario, 7.1:1 sobre negro-1 */
  --m-humo-tenue: #767c87;    /* metadatos; nunca para texto corrido */

  /* ── Escala tipográfica fluida ─────────────────────────────────────
     Crece con la ventana entre 360 y 1440 px y se detiene ahí. Antes los
     tamaños eran px fijos con saltos por media query, que es lo que hacía
     que en tablet se viera o gigante o diminuto. */
  --m-txt-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
  --m-txt-sm:   clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --m-txt-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --m-txt-md:   clamp(1.13rem, 1.05rem + 0.35vw, 1.35rem);
  --m-txt-lg:   clamp(1.35rem, 1.18rem + 0.75vw, 1.85rem);
  --m-txt-xl:   clamp(1.65rem, 1.32rem + 1.45vw, 2.65rem);
  --m-txt-2xl:  clamp(2.05rem, 1.50rem + 2.40vw, 3.70rem);
  --m-txt-3xl:  clamp(2.50rem, 1.60rem + 3.90vw, 5.20rem);

  /* ── Escala de espacio fluida ──────────────────────────────────── */
  --m-esp-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --m-esp-2xs: clamp(0.50rem, 0.47rem + 0.13vw, 0.63rem);
  --m-esp-xs:  clamp(0.75rem, 0.71rem + 0.20vw, 0.94rem);
  --m-esp-sm:  clamp(1.00rem, 0.94rem + 0.26vw, 1.25rem);
  --m-esp-md:  clamp(1.50rem, 1.41rem + 0.39vw, 1.88rem);
  --m-esp-lg:  clamp(2.00rem, 1.77rem + 1.04vw, 3.00rem);
  --m-esp-xl:  clamp(3.00rem, 2.53rem + 2.08vw, 5.00rem);
  --m-esp-2xl: clamp(4.50rem, 3.57rem + 4.17vw, 8.50rem);

  /* ── Medidas de línea y composición ────────────────────────────── */
  --m-ancho-texto: 68ch;      /* párrafo cómodo de leer */
  --m-ancho-pagina: 1320px;   /* el contenido deja de crecer aquí */
  --m-canal: clamp(1.25rem, 4vw, 3.5rem);  /* margen lateral de la página */

  /* ── Trazo, radio y sombra ─────────────────────────────────────── */
  --m-hilo: 1px;
  --m-radio-sm: 4px;
  --m-radio-md: 10px;
  --m-radio-lg: 18px;
  --m-sombra-baja: 0 2px 12px rgb(0 0 0 / 0.45);
  --m-sombra-media: 0 12px 40px rgb(0 0 0 / 0.55);
  --m-sombra-alta: 0 28px 80px rgb(0 0 0 / 0.65);

  /* ── Movimiento ────────────────────────────────────────────────── */
  --m-rapido: 150ms;
  --m-medio: 320ms;
  --m-lento: 680ms;
  --m-salida: cubic-bezier(0.22, 1, 0.36, 1);   /* llega y frena */
  --m-entrada: cubic-bezier(0.55, 0, 0.35, 1);  /* arranca y sale */

  /* ── Capas ─────────────────────────────────────────────────────── */
  --m-capa-fondo: -1;
  --m-capa-contenido: 1;
  --m-capa-pegado: 100;
  --m-capa-cabecera: 1000;
  --m-capa-modal: 2000;

  /* Valores por defecto: la marca industrial. */
  --m-acento: var(--m-arco);
  --m-acento-claro: var(--m-arco-claro);
  --m-acento-hondo: var(--m-arco-hondo);
  --m-texto: var(--m-tinta);
  --m-titular: 'Cinzel', 'Times New Roman', serif;
  --m-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =====================================================================
   La marca industrial va en azul marino

   Hubo una versión clara de esta marca, con la página en papel blanco. El
   cliente la vio y pidió lo contrario el 2026-08-22: que la página vuelva
   al color del sitio original —marino de arriba abajo, como sigue estando
   metalcocnc.cl— y que lo único blanco sea la barra de navegación. Este
   bloque es esa vuelta.

   Los nombres siguen diciendo `negro` porque son la MISMA ranura en el
   sistema —el fondo de página, la tarjeta, el modal— y renombrarlos
   obligaría a tocar las nueve páginas; lo que cambia es el valor.

   Sobre marino el azul de marca se usa entero: era sobre papel donde
   #00bfff daba 1,9:1 y había que cerrarlo. El único sitio del sitio que
   sigue siendo papel es la barra, y por eso tiene sus propios tokens
   --m-barra-* unas líneas más abajo, con el azul cerrado a #0074b7.

   La escala no es gris teñido: cada peldaño lleva el tono 213 y sube de
   saturación conforme baja de claridad. Un negro con algo de azul dentro
   parece acero; un negro neutro parece carbón.
   ===================================================================== */
[data-marca='cnc'] {
  color-scheme: dark;

  /* La marca industrial vuelve al color de la página original: azul
     marino, no papel. Lo que se queda blanco es la barra de navegación, y
     solo ella —lleva sus propios valores en portada.css—.

     La escala no es gris: cada peldaño tiene el tono 213 y sube de
     saturación según baja de claridad, que es lo que hace que un negro
     parezca acero azulado y no carbón. */
  --m-negro-0: #020814;   /* fondo absoluto */
  --m-negro-1: #061224;   /* fondo de página */
  --m-negro-2: #0a1b33;   /* superficie elevada: tarjeta, panel */
  --m-negro-3: #0f2647;   /* superficie sobre superficie */
  --m-negro-4: #1b3a63;   /* borde sólido */

  /* El azul de la marca, el del arco de plasma. Sobre marino se puede
     usar entero: es sobre papel donde había que cerrarlo.

     Se afinan las PRIMITIVAS y no los tokens semánticos, y los
     semánticos siguen apuntando a ellas con var(), igual que hacen :root
     y la marca medieval. Escribir aquí --m-acento-claro: #62d0ff como
     literal parecía inocente y no lo era: el modo de alto contraste
     redefine --m-arco-claro, y con el literal en medio esa redefinición
     no llegaba nunca. El botón de sesión salía celeste sobre celeste
     —1,1:1— justo para quien había encendido el modo para poder leer.
     Con la cadena entera de var(), cualquier modo que toque la primitiva
     alcanza a la marca. */
  --m-arco: #00a3e0;
  --m-arco-claro: #62d0ff;
  --m-arco-hondo: #0057a3;

  --m-acento: var(--m-arco);
  --m-acento-claro: var(--m-arco-claro);
  --m-acento-hondo: var(--m-arco-hondo);

  --m-texto: #eaf3fb;
  /* Hay reglas heredadas del monolito que piden --m-tinta directamente. */
  --m-tinta: #eaf3fb;
  --m-humo: #9db8d4;       /* 9,1:1 sobre el fondo de página */
  --m-humo-tenue: #7b96b4; /* 6,1:1; aguanta un metadato de sobra */

  /* ── El ritmo de bandas ─────────────────────────────────────────────
     El cliente pide que los paneles se distingan entre sí por el tono del
     azul y no por una línea. Son seis peldaños; cada banda toma uno y
     ninguna repite el de su vecina, así que al bajar la página el corte
     entre secciones se ve aunque no haya filete.

     Los seis pasan de sobra el contraste con el texto: el peor caso es
     --m-humo-tenue sobre la banda más alta, y ahí no se escribe texto
     menudo. Medido en la pasada de verificación. */
  --m-banda-1: #123a6b;   /* la más alta — la campaña */
  --m-banda-2: #0d2a56;   /* alta — el héroe por dentro */
  --m-banda-3: #0b2140;   /* media — llave en mano */
  --m-banda-4: #08192e;   /* media honda — reseñas */
  --m-banda-5: #04101f;   /* honda — por qué elegirnos, contacto */
  --m-banda-6: #020610;   /* abismo — servicios y galería */
  --m-banda-pie: #01050c; /* el pie, más hondo que todo */

  /* Las guías CAD del héroe, con el neón entero del original. */
  --m-guia: rgb(0 191 255 / 0.6);
  --m-guia-clara: rgb(98 208 255 / 0.5);
  --m-guia-halo: rgb(0 191 255 / 0.38);

  /* Las dos marcas no titulan igual. La medieval es Cinzel, que es lo que
     lleva desde el principio. La industrial declaraba Inter y Outfit 84
     veces en su CSS y no cargaba ninguna de las dos, así que caía al sans
     del sistema: aquí se cumple lo que ya pedía. Un taller de corte por
     plasma no titula en romana. */
  --m-titular: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m-titular-ajuste: -0.02em;
}

/* =====================================================================
   La barra de navegación tiene su propia paleta

   El cliente la quiere blanca en la marca industrial aunque la página sea
   azul marino, que es exactamente lo que hacía el sitio original: barra
   de papel, taller oscuro debajo. Si la barra tirara de --m-negro-0 como
   el resto de superficies se iría a marino con la página, así que se le
   dan sus propios tokens.

   El azul de la barra NO es --m-acento. Sobre marino el acento entero se
   lee de sobra; sobre papel, #00a3e0 da 2,9:1 y no llega ni para un
   rótulo. El de la barra va cerrado a #0074b7, que da 5,0:1.
   ===================================================================== */
:root {
  --m-barra-fondo: var(--m-negro-2);
  --m-barra-tinta: var(--m-texto);
  --m-barra-azul: var(--m-acento);
  --m-barra-azul-claro: var(--m-acento-claro);
}

[data-marca='cnc'] {
  --m-barra-fondo: #ffffff;
  --m-barra-tinta: #0d1b2a;   /* 17,4:1 sobre blanco */
  --m-barra-azul: #0074b7;    /*  5,0:1 sobre blanco */
  --m-barra-azul-claro: #00a3e0;
}

[data-marca='medieval'] {
  --m-acento: var(--m-oro);
  --m-acento-claro: var(--m-oro-claro);
  --m-acento-hondo: var(--m-oro-hondo);
  --m-texto: var(--m-papel);
}

/* =====================================================================
   Reset mínimo

   Solo lo que ninguna página puede resolver por su cuenta. El CSS antiguo
   ya declaraba box-sizing: border-box en sus propias hojas, así que esto
   no cambia nada donde ya estaba y evita el desbordamiento lateral donde
   no estaba: un .m-contenedor con width: 100% más padding lateral mide
   100% + 40 px si el modelo de caja es el de contenido.
   ===================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* clip, no hidden: hidden en el eje horizontal convierte el vertical en
   scroll propio y rompe position: sticky dentro de la página. */
body {
  overflow-x: clip;
}

/* =====================================================================
   Atmósfera

   El fondo del sitio era un negro plano con dos degradados radiales. Se
   mantiene la idea y se le añaden dos cosas que hacen la diferencia entre
   "fondo oscuro" y "sala con luz": grano y viñeta.

   El grano es un feTurbulence en un data URI, no una imagen: pesa 300
   bytes y no viaja por la red. Va fijo y sin animación, así que no cuesta
   nada después del primer pintado.
   ===================================================================== */
.m-atmosfera {
  position: relative;
  isolation: isolate;
}

.m-atmosfera::before,
.m-atmosfera::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--m-capa-fondo);
}

/* Luz: dos focos que insinúan de dónde viene la iluminación, y viñeta. */
.m-atmosfera::before {
  background:
    radial-gradient(60rem 40rem at 12% -5%, color-mix(in srgb, var(--m-acento) 12%, transparent) 0%, transparent 60%),
    radial-gradient(50rem 35rem at 105% 15%, color-mix(in srgb, var(--m-acento-hondo) 22%, transparent) 0%, transparent 55%),
    radial-gradient(70rem 50rem at 50% 120%, color-mix(in srgb, var(--m-brasa) 10%, transparent) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgb(0 0 0 / 0.55) 100%),
    var(--m-negro-1);
}

/* La marca industrial tiene su propia luz: dos focos azules en vez de la
   brasa de la fragua, y la viñeta más suave. La brasa es de la forja y no
   pinta nada en un taller de corte por plasma. */
[data-marca='cnc'] .m-atmosfera::before,
.m-atmosfera[data-marca='cnc']::before {
  background:
    radial-gradient(60rem 40rem at 12% -5%, color-mix(in srgb, var(--m-acento) 18%, transparent) 0%, transparent 62%),
    radial-gradient(50rem 35rem at 105% 12%, color-mix(in srgb, var(--m-acento-claro) 12%, transparent) 0%, transparent 58%),
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgb(1 5 12 / 0.5) 100%),
    var(--m-negro-1);
}

.m-atmosfera::after {
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* =====================================================================
   El corte — la firma de la casa

   Metalco corta metal. La página se divide con la marca que deja ese
   corte: una línea con el núcleo incandescente y el calor apagándose
   hacia los extremos. Sustituye a los border-bottom dorados que separaban
   todo por igual.

   Al entrar en pantalla crece de 0 a 100 % como si la máquina estuviera
   pasando. Con prefers-reduced-motion aparece ya cortada.
   ===================================================================== */
.m-corte {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--m-acento-hondo) 12%,
    var(--m-acento) 38%,
    var(--m-acento-claro) 50%,
    var(--m-acento) 62%,
    var(--m-acento-hondo) 88%,
    transparent 100%
  );
  transform-origin: 50% 50%;
}

/* El resplandor va en un pseudoelemento con blur, no en box-shadow sobre
   la línea: así el calor se difumina de verdad en vez de dibujar un halo
   duro. */
.m-corte::after {
  content: '';
  position: absolute;
  inset: -6px 0;
  background: inherit;
  filter: blur(7px);
  opacity: 0.5;
}

.m-corte--corto {
  width: clamp(4rem, 12vw, 9rem);
  margin-inline: auto;
}

.m-corte--izquierda {
  margin-inline: 0;
}

/* Variante vertical, para separar columnas en pantallas anchas. */
.m-corte--vertical {
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--m-acento-hondo) 15%,
    var(--m-acento) 50%,
    var(--m-acento-hondo) 85%,
    transparent 100%
  );
}

/* =====================================================================
   Revelado al entrar en pantalla

   Lo aplica revelar.js con IntersectionObserver. El elemento nace con su
   estado final si el visitante pidió menos movimiento, así que no hay
   forma de que el contenido quede invisible por un fallo de JS: la clase
   .m-visible se añade, no se quita.
   ===================================================================== */
/* `[data-revelar]` por sí solo NO oculta nada. Quien oculta es la clase
   .m-revelable, y la pone revelar.js justo antes de empezar a observar.
   Así, si el script no llega —bloqueado, error, red caída—, el contenido
   se ve; que es exactamente el fallo que tenía el sitio anterior, con 21
   secciones naciendo en opacity: 0 y sin <noscript>. */
.m-revelable {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--m-lento) var(--m-salida),
    transform var(--m-lento) var(--m-salida);
  transition-delay: var(--m-retraso, 0ms);
}

.m-revelable[data-revelar='corte'] {
  transform: scaleX(0);
  opacity: 1;
}

.m-revelable.m-visible {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   Estructura
   ===================================================================== */
.m-contenedor {
  width: 100%;
  max-width: var(--m-ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--m-canal);
}

.m-contenedor--estrecho {
  max-width: 72ch;
}

.m-seccion {
  padding-block: var(--m-esp-xl);
}

.m-seccion--holgada {
  padding-block: var(--m-esp-2xl);
}

/* Rejilla que nunca deforma la tarjeta: las columnas se calculan solas y
   el mínimo se respeta hasta que ya no cabe. Sustituye a las rejillas de
   3 columnas fijas con media queries. */
.m-rejilla {
  display: grid;
  gap: var(--m-esp-md);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--m-col, 17rem), 100%), 1fr));
}

.m-rejilla--holgada {
  gap: var(--m-esp-lg);
}

/* Ritmo vertical por composición, no por márgenes sueltos en cada hijo. */
.m-pila > * + * {
  margin-block-start: var(--m-flujo, var(--m-esp-sm));
}

/* =====================================================================
   Tipografía
   ===================================================================== */
.m-titulo {
  font-family: var(--m-titular);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--m-titular-ajuste, 0.01em);
  text-wrap: balance;
  color: var(--m-texto);
}

.m-titulo--hero { font-size: var(--m-txt-3xl); }
.m-titulo--seccion { font-size: var(--m-txt-2xl); }
.m-titulo--bloque { font-size: var(--m-txt-xl); }
.m-titulo--tarjeta {
  font-size: var(--m-txt-md);
  line-height: 1.2;
  font-weight: 600;
}

/* El párrafo se corta a 68 caracteres pase lo que pase: en 1440 px el
   texto a todo el ancho es la razón número uno de que una página oscura
   se vuelva ilegible. */
.m-parrafo {
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-base);
  line-height: 1.65;
  max-width: var(--m-ancho-texto);
  color: var(--m-humo);
  text-wrap: pretty;
}

/* Antetítulo: la etiqueta de la placa de una máquina. Va antes del
   título y dice de qué sección se trata. */
.m-cinta {
  display: inline-flex;
  align-items: center;
  gap: var(--m-esp-2xs);
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m-acento);
}

.m-cinta::before {
  content: '';
  width: clamp(1.5rem, 4vw, 2.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-acento));
}

/* =====================================================================
   Placa de datos

   Las fichas técnicas del sitio eran párrafos con «Época: …» dentro.
   Aquí pasan a la forma que tienen en el mundo real: la placa grabada de
   una máquina y la cartela de un museo son lo mismo — etiqueta pequeña
   arriba, dato debajo, y una línea que las separa.
   ===================================================================== */
.m-placa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 0;
  border-block: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 22%, transparent);
}

.m-placa__campo {
  padding: var(--m-esp-xs) var(--m-esp-sm) var(--m-esp-xs) 0;
  border-inline-end: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 12%, transparent);
}

.m-placa__campo:last-child {
  border-inline-end: 0;
}

.m-placa__etiqueta {
  display: block;
  font-size: var(--m-txt-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--m-humo-tenue);
  margin-block-end: var(--m-esp-3xs);
}

.m-placa__valor {
  display: block;
  font-size: var(--m-txt-sm);
  line-height: 1.4;
  color: var(--m-texto);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Superficies
   ===================================================================== */
.m-superficie {
  position: relative;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--m-negro-3) 92%, var(--m-acento)) 0%,
      var(--m-negro-2) 45%,
      var(--m-negro-1) 100%);
  border: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 16%, transparent);
  border-radius: var(--m-radio-md);
  box-shadow: var(--m-sombra-baja);
}

/* El reflejo de una superficie metálica: una línea clara arriba, donde da
   la luz. Un borde entero iluminado se ve a plástico; solo el canto
   superior se ve a metal. */
.m-superficie::before {
  content: '';
  position: absolute;
  inset-inline: 12%;
  inset-block-start: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--m-acento-claro) 55%, transparent), transparent);
  pointer-events: none;
}

/* =====================================================================
   Botones
   ===================================================================== */
.m-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-esp-2xs);
  min-height: 2.75rem;          /* 44 px: el mínimo que un dedo acierta */
  padding: var(--m-esp-2xs) var(--m-esp-md);
  border: var(--m-hilo) solid var(--m-acento);
  border-radius: var(--m-radio-sm);
  background: transparent;
  color: var(--m-acento-claro);
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition:
    color var(--m-rapido) var(--m-entrada),
    border-color var(--m-rapido) var(--m-entrada),
    box-shadow var(--m-medio) var(--m-salida);
}

/* El relleno entra por abajo, como el metal que se calienta desde la
   base. Es transform, no width, así que no releva la maquetación. */
.m-boton::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--m-acento) 0%, var(--m-acento-hondo) 100%);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--m-medio) var(--m-salida);
  z-index: -1;
}

.m-boton:hover::before,
.m-boton:focus-visible::before {
  transform: scaleY(1);
}

.m-boton:hover,
.m-boton:focus-visible {
  color: var(--m-negro-0);
  box-shadow: 0 0 24px color-mix(in srgb, var(--m-acento) 35%, transparent);
}

.m-boton--solido {
  background: linear-gradient(180deg, var(--m-acento) 0%, var(--m-acento-hondo) 100%);
  color: var(--m-negro-0);
}

.m-boton--solido:hover,
.m-boton--solido:focus-visible {
  color: var(--m-negro-0);
}

.m-boton--discreto {
  border-color: color-mix(in srgb, var(--m-acento) 30%, transparent);
  color: var(--m-humo);
}

/* =====================================================================
   Correcciones globales

   Las únicas reglas de este archivo que tocan etiquetas. Son cuatro y
   arreglan cosas que estaban rotas en todas las páginas a la vez.
   ===================================================================== */

/* Una imagen sin límite de ancho es la causa habitual del scroll
   horizontal en móvil. */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

/* El foco del teclado se veía como un contorno del navegador sobre fondo
   negro, o directamente no se veía. */
:focus-visible {
  outline: 2px solid var(--m-acento-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Al saltar a un ancla, el destino quedaba tapado por la cabecera fija. */
:target {
  scroll-margin-top: 6rem;
}

::selection {
  background: color-mix(in srgb, var(--m-acento) 40%, transparent);
  color: var(--m-texto);
}

/* =====================================================================
   Menos movimiento

   No es "quitar animaciones": es entregar el estado final. Quien pide
   menos movimiento ve la página compuesta, no una página a medio
   revelar.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .m-revelable {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Impresión: el catálogo se imprime. Fondo blanco, tinta negra, sin
   atmósfera ni resplandores. */
@media print {
  .m-atmosfera::before,
  .m-atmosfera::after {
    display: none;
  }

  .m-corte {
    background: #000;
    height: 0.5pt;
  }

  .m-corte::after {
    display: none;
  }
}