/* Pricto · componentes base del sistema final.
   Requiere los tokens (../tokens/sistema.css) y las fuentes (fonts/fonts.css). Ninguna cursiva. */
@import url("fonts/fonts.css");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
em, i, cite, var, address, dfn, q { font-style: normal; }
body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
::selection { background: var(--color-primario); color: var(--color-on-primario); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Bilingüe: el texto del idioma inactivo se oculta (data-lang en <html>). */
:root[data-lang="es"] body [lang="en"], :root[data-lang="en"] body [lang="es"] { display: none !important; }

/* ---------- Tipografía ---------- */
.m-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.m-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-muted); }
.m-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 6.6vw, 96px); line-height: .98; letter-spacing: var(--tracking-display); color: var(--color-ink); }
.m-h2 { font-family: var(--font-display); font-weight: 650; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04; letter-spacing: -0.04em; color: var(--color-ink); }
.m-h3 { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--color-ink); }
.m-lede { color: var(--color-muted); font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; max-width: 36em; }
.m-num { font-family: var(--font-num); font-variant-numeric: tabular-nums lining-nums; }
.m-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* La palabra extruida del hero: sombra escalonada en salmón. */
.m-extruida { text-shadow: 1px 1px 0 var(--color-sombra-claro), 2px 2px 0 var(--color-sombra-claro), 3px 3px 0 var(--color-sombra), 4px 4px 0 var(--color-sombra); }

/* ---------- Logo (usar los SVG de logo/; el texto ya está en contornos) ---------- */
.m-logo { display: inline-flex; align-items: center; height: 28px; }
.m-logo img { height: 100%; width: auto; }

/* ---------- Botones: bloque pino con sombra salmón desplazada ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap; transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s; }
.m-btn-primario { background: var(--color-primario); color: var(--color-on-primario); box-shadow: 3px 3px 0 var(--color-sombra); }
.m-btn-primario:hover { background: var(--color-primario-hover); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--color-sombra); }
.m-btn-primario:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--color-sombra); }
.m-btn-linea { background: var(--color-bg); color: var(--color-ink); border-color: var(--color-line2); }
.m-btn-linea:hover { border-color: var(--color-ink); }
.m-btn-sm { font-size: 14px; padding: 9px 14px; }

/* ---------- Navegación ---------- */
.m-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--color-line); }
.m-nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.m-nav-links { display: flex; gap: 4px; margin-right: auto; font-size: 15px; }
.m-nav-links a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--color-text); }
.m-nav-links a:hover, .m-nav-links a[aria-current] { color: var(--color-ink); background: var(--color-bg2); }
.m-nav-r { display: flex; gap: 8px; align-items: center; }
.m-lang { display: flex; border: 1px solid var(--color-line2); border-radius: var(--radius-sm); overflow: hidden; font-family: var(--font-mono); font-size: 12px; }
.m-lang button { padding: 6px 9px; color: var(--color-muted); }
.m-lang button[aria-pressed="true"] { background: var(--color-ink); color: #fff; }
@media (max-width: 960px) { .m-nav-links { display: none; } }

/* ---------- Pills y estados ---------- */
.m-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; padding: 5px 11px; border: 1px solid var(--color-line2); border-radius: 999px; color: var(--color-text); background: var(--color-bg); }
.m-pill-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primario); box-shadow: 0 0 0 3px var(--color-primario-soft); }
.m-chip { font-family: var(--font-mono); font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--color-surface2); color: var(--color-muted); white-space: nowrap; }
.m-chip-ok { background: var(--color-primario-soft); color: var(--color-primario-ink); }
.m-chip-senal { background: var(--color-accent-soft); color: var(--color-accent-ink); }

/* ---------- Variación de precio: siempre flecha + signo + color ---------- */
.m-delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.m-delta.sube { color: var(--color-sube); }
.m-delta.baja { color: var(--color-baja); }
.m-delta.igual { color: var(--color-igual); }
.m-delta.chip { padding: 2px 7px; border-radius: var(--radius-xs); }
.m-delta.chip.sube { background: var(--color-sube-soft); }
.m-delta.chip.baja { background: var(--color-baja-soft); }
.m-delta.chip.igual { background: var(--color-igual-soft); }

/* ---------- Ficha de producto: el objeto de la marca ---------- */
.m-ficha { position: relative; background: #fff; border: 1px solid var(--color-line2); border-radius: var(--radius-xs); padding: 14px 14px 12px; display: grid; gap: 4px; box-shadow: 3px 3px 0 var(--color-canto), 6px 6px 0 var(--color-canto-sombra); font-size: 13px; }
.m-ficha .cat { position: absolute; left: 14px; top: 0; width: 36px; height: 3px; background: var(--c, var(--color-cat-1)); }
.m-ficha .meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-top: 4px; }
.m-ficha .nombre { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--color-ink); }
.m-ficha .formato { font-family: var(--font-mono); font-size: 11px; color: var(--color-dim); }
.m-ficha .pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 18px; }
.m-ficha .precio { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--color-ink); line-height: 1; }
.m-ficha .donde { text-align: right; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-muted); line-height: 1.5; }
.m-ficha .origen { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-line2); font-family: var(--font-mono); font-size: 10.5px; color: var(--color-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Tablas densas ---------- */
.m-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-tabla th { text-align: left; font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-dim); padding: 9px 12px; border-bottom: 1px solid var(--color-line2); background: var(--color-bg2); white-space: nowrap; }
.m-tabla td { padding: 11px 12px; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.m-tabla td.num, .m-tabla th.num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.m-tabla tr.min td { background: var(--color-primario-soft); }
.m-tabla tr.min td:first-child { box-shadow: inset 3px 0 0 var(--color-primario); }

/* ---------- Código y terminal ---------- */
.m-codigo { background: var(--color-code-bg); color: var(--color-code-text); font: 13px/1.7 var(--font-mono); padding: 18px 20px; border-radius: var(--radius-md); overflow-x: auto; white-space: pre; }
.m-codigo .c { color: var(--color-code-dim); } .m-codigo .k { color: var(--color-code-key); } .m-codigo .s { color: var(--color-code-str); } .m-codigo .n { color: var(--color-code-num); } .m-codigo .p { color: var(--color-deep-accent); }
.m-codigo .sube { color: #ff9a8f; } .m-codigo .baja { color: #8cc8f0; }

/* Línea de fuente: la procedencia de cada dato. */
.m-fuente { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); border-top: 1px dashed var(--color-line2); padding-top: 8px; }
.m-fuente b { color: var(--color-ink); font-weight: 500; }

/* ---------- Paneles y tarjetas ---------- */
.m-panel { background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.m-panel-papel { background: var(--color-bg2); border-radius: var(--radius-lg); }
.m-oscuro { background: var(--color-deep); color: var(--color-deep-text); border-radius: var(--radius-panel); }

/* Gráficos escalonados (sistema.js → M.grafico). */
.g-grid { stroke: var(--color-grid); }
.g-eje { font: 10.5px var(--font-mono); fill: var(--color-dim); }
.g-area { opacity: .08; }