/* MagnaRTK: generado desde tokens.json. Tema oscuro por defecto; data-theme="light" en <html> para el claro. */
:root, [data-theme="dark"] {
  --lima: #a9eb02;
  --carbon: #1a2225;
  --gris-equipo: #717477;
  --gris-800: #232c30;
  --gris-700: #2c373b;
  --gris-600: #3d484c;
  --gris-300: #989ca0;
  --gris-200: #c6c9cc;
  --gris-100: #e4e6e8;
  --gris-50: #f3f4f5;
  --fondo: var(--carbon);
  --superficie: var(--gris-800);
  --superficie-alta: var(--gris-700);
  --superficie-equipo: var(--gris-equipo);
  --superficie-imagen: var(--gris-50);
  --borde: var(--gris-600);
  --borde-control: var(--gris-equipo);
  --tinta: var(--gris-50);
  --tinta-suave: var(--gris-300);
  --tinta-sobre-equipo: #ffffff;
  --acento: var(--lima);
  --relleno-acento: var(--lima);
  --relleno-acento-hover: #c2f74f;
  --sobre-acento: var(--carbon);
  --foco: var(--lima);
  --estado-fix: var(--lima);
  --estado-float: #ffb21f;
  --estado-dgps: #5aa9ff;
  --estado-single: var(--gris-300);
  --estado-sin-fix: #ff6152;
  --error: #ff7a6e;
}
[data-theme="light"] {
  --fondo: var(--gris-50);
  --superficie: #ffffff;
  --superficie-alta: var(--gris-100);
  --superficie-imagen: var(--gris-100);
  --borde: var(--gris-200);
  --tinta: var(--carbon);
  --tinta-suave: #5b6367;
  --acento: #4a6a00;
  --foco: var(--carbon);
  --error: #b42318;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radio-0: 0px;
  --radio-sm: 2px;
  --radio-md: 4px;
  --corte-sm: 8px;
  --corte-md: 16px;
  --corte-lg: 32px;
  --banda-fina: 3px;
  --banda-ancha: 8px;
  --font-display: Saira, system-ui, sans-serif;
  --font-texto: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display { font-family: var(--font-display); font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.01em; }
.titulo-1 { font-family: var(--font-display); font-size: 44px; line-height: 48px; font-weight: 700; }
.titulo-2 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 600; }
.titulo-3 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; }
.precio { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 700; }
.etiqueta { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.cuerpo-grande { font-family: var(--font-texto); font-size: 18px; line-height: 28px; font-weight: 400; }
.cuerpo { font-family: var(--font-texto); font-size: 16px; line-height: 24px; font-weight: 400; }
.cuerpo-chico { font-family: var(--font-texto); font-size: 14px; line-height: 20px; font-weight: 400; }
.dato { font-family: var(--font-texto); font-size: 15px; line-height: 20px; font-weight: 500; }
.leyenda { font-family: var(--font-texto); font-size: 12px; line-height: 16px; font-weight: 400; }

500;600&family=Saira:wght@500;600;700&display=swap");

/* MagnaRTK: componentes en CSS puro. Todos los valores vienen de tokens.json (variables --nombre). */

body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--font-texto); font-size: 16px; line-height: 24px; }

/* Logo: el inverso (letras blancas) en oscuro, el positivo (letras carbón) en claro */
.mrtk-logo { display: block; height: 28px; width: auto; }
.mrtk-logo--claro { display: none; }
[data-theme="light"] .mrtk-logo--oscuro { display: none; }
[data-theme="light"] .mrtk-logo--claro { display: block; }

/* Botón */
.mrtk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-6); border: 1px solid transparent; border-radius: var(--radio-sm); font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mrtk-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mrtk-btn--primario { background: var(--relleno-acento); color: var(--sobre-acento); }
.mrtk-btn--primario:hover { background: var(--relleno-acento-hover); }
.mrtk-btn--secundario { background: transparent; color: var(--tinta); border-color: var(--borde-control); }
.mrtk-btn--secundario:hover { background: var(--superficie-alta); }
.mrtk-btn--enlace { height: auto; padding: 0; background: transparent; color: var(--acento); }
.mrtk-btn--enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.mrtk-btn--chico { height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.mrtk-btn:disabled, .mrtk-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.mrtk-btn--primario:disabled:hover { background: var(--relleno-acento); }

/* Badge de estado GNSS */
.mrtk-estado { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radio-sm); background: var(--estado-single); color: var(--sobre-acento); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.mrtk-estado::before { content: ""; width: 6px; height: 6px; background: currentColor; flex: none; }
.mrtk-estado--fix { background: var(--estado-fix); }
.mrtk-estado--float { background: var(--estado-float); }
.mrtk-estado--dgps { background: var(--estado-dgps); }
.mrtk-estado--single { background: var(--estado-single); }
.mrtk-estado--sin-fix { background: var(--estado-sin-fix); }

/* Tabla de especificaciones */
.mrtk-specs { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); font-size: 14px; line-height: 20px; }
.mrtk-specs caption { caption-side: top; text-align: left; padding: 0 0 var(--space-3); font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.mrtk-specs th, .mrtk-specs td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-top: 1px solid var(--borde); }
.mrtk-specs th[scope="row"] { width: 40%; font-weight: 400; color: var(--tinta-suave); }
.mrtk-specs td { font-size: 15px; font-weight: 500; color: var(--tinta); }
.mrtk-specs .mrtk-specs__grupo th { background: var(--superficie-alta); padding-top: var(--space-2); padding-bottom: var(--space-2); font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); border-left: var(--banda-fina) solid var(--relleno-acento); }
.mrtk-specs tbody tr:not(.mrtk-specs__grupo):hover { background: var(--superficie-alta); }
.mrtk-specs__nota { margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; color: var(--tinta-suave); }

/* Tarjeta de producto: imagen clara, anillo lima moleteado, cuerpo gris equipo, esquina cortada */
.mrtk-producto { display: flex; flex-direction: column; max-width: 360px; background: var(--superficie-equipo); color: var(--tinta-sobre-equipo); clip-path: polygon(0 0, calc(100% - var(--corte-md)) 0, 100% var(--corte-md), 100% 100%, 0 100%); }
.mrtk-producto__imagen { background: var(--superficie-imagen); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6); box-sizing: border-box; }
.mrtk-producto__imagen img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mrtk-producto__anillo { height: var(--banda-ancha); background-color: var(--relleno-acento); background-image: repeating-linear-gradient(45deg, rgba(26, 34, 37, 0.22) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(26, 34, 37, 0.22) 0 1px, transparent 1px 4px); }
.mrtk-producto__cuerpo { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); }
.mrtk-producto__linea { margin: 0; font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-sobre-equipo); }
.mrtk-producto__nombre { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--tinta-sobre-equipo); }
.mrtk-producto__datos { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--tinta-sobre-equipo); }
.mrtk-producto__datos li { display: flex; gap: var(--space-2); align-items: baseline; }
.mrtk-producto__datos li::before { content: ""; width: 6px; height: 6px; background: var(--relleno-acento); flex: none; transform: translateY(-2px); }
.mrtk-producto__precio { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 700; color: var(--relleno-acento); font-variant-numeric: tabular-nums; }
.mrtk-producto__nota { margin: 0; font-size: 12px; line-height: 16px; color: var(--tinta-sobre-equipo); }
.mrtk-producto__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.mrtk-producto .mrtk-btn--secundario { color: var(--tinta-sobre-equipo); border-color: var(--tinta-sobre-equipo); }
.mrtk-producto .mrtk-btn--secundario:hover { background: var(--carbon); border-color: var(--carbon); }

/* Encabezado y navegación */
.mrtk-encabezado { display: flex; align-items: center; gap: var(--space-8); min-height: 64px; padding: 0 var(--space-8); background: var(--superficie); border-bottom: var(--banda-fina) solid var(--relleno-acento); }
.mrtk-encabezado__marca { display: flex; align-items: center; flex: none; }
.mrtk-encabezado__marca:focus-visible, .mrtk-nav a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mrtk-nav { display: flex; gap: var(--space-6); flex: 1; }
.mrtk-nav a { position: relative; padding: var(--space-2) 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta-suave); text-decoration: none; }
.mrtk-nav a:hover { color: var(--tinta); }
.mrtk-nav a[aria-current="page"] { color: var(--tinta); }
.mrtk-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acento); }
.mrtk-encabezado__menu { display: none; width: 36px; padding: 0; }
@media (max-width: 720px) {
  .mrtk-encabezado { gap: var(--space-2); padding: 0 var(--space-4); }
  .mrtk-encabezado .mrtk-logo { height: 24px; }
  .mrtk-nav { display: none; }
  .mrtk-encabezado__menu { display: inline-flex; margin-left: auto; }
}

/* Ícono: el SVG del set propio funciona como máscara y toma el color del texto (currentColor) */
.mrtk-icono { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.mrtk-icono--16 { width: 16px; height: 16px; }
.mrtk-icono--32 { width: 32px; height: 32px; }