/* ==========================================================================
   INYESOFT — v2 · Dirección "Banco de instrumentos"
   La medición como sujeto visual. Grafito cálido + fósforo ámbar,
   Archivo + Oxanium, paneles de lectura, gauges y trazas de señal.
   Mismo contenido y misma lógica (app.js) que la raíz; sólo cambia lo visual.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Oxanium = numerales/rótulos de instrumento (reemplaza a Chivo Mono de v1) */
  --mono: 'Oxanium', ui-monospace, 'Chivo Mono', SFMono-Regular, Consolas, monospace;

  /* Grafito cálido: no el negro neutro de v1. Tinte ámbar sutil. */
  --bg:        #0E0C09;
  --bg-alt:    #0B0906;
  --bg-hover:  #17130D;
  --bg-sel:    #201908;   /* fila del catálogo cuya ficha está abierta */
  --surface:   #15110B;
  --surface-2: #1A150D;

  --line:      #2B2620;
  --line-soft: #211C16;
  --line-hair: #1C1811;
  --line-mid:  #3A342B;
  /* Bordes que son la única señal de un control: WCAG 1.4.11 ≥3:1.
     #6c665b = 3,63:1 sobre #0E0C09. */
  --line-ui:   #6c665b;
  --line-str:  #6c665b;

  /* Rampa de grises cálida — toda cumple AA (≥4,5:1) sobre #0E0C09.
     Verificado en vivo por el arnés. */
  --fg:        #ECEAE4;
  --fg-hi:     #F7F5EF;
  --fg-note:   #E8E5DE;
  --fg-2:      #D0CDC4;
  --fg-3:      #9C988E;
  --fg-4:      #928E85;
  --fg-5:      #8D8980;
  --fg-6:      #89857C;
  --fg-7:      #8A867C;
  --fg-8:      #868279;
  --fg-9:      #827F76;

  /* Fósforo ámbar */
  --yellow:      #F5B400;
  --yellow-hi:   #FFC21F;
  --yellow-line: #4A3A00;   /* segmento "off" / tracks */
  --yellow-wash: rgba(245, 180, 0, .10);
  --glow:        rgba(245, 180, 0, .34);

  /* Grilla de señal (osciloscopio), muy tenue */
  --grid:      rgba(245, 180, 0, .045);

  /* Error: rojo propio, no el ámbar afirmativo */
  --red:      #FF6A55;   /* ~6,9:1 */
  --red-line: #7A2B1E;
  --red-wash: rgba(255, 106, 85, .08);

  --wa:      #25D366;
  --wa-ink:  #062a12;
  --wa-line: #2f5a34;

  /* MD Repro — fondo navy (v3) + acento CELESTE (el del logo MD) */
  --md-bg:     #0E1620;
  --md-bg-2:   #0d1926;
  --md-bg-3:   #102132;
  --md-line:   #1d4266;
  --md-line-2: #163149;
  --md-line-3: #173247;
  --md-line-4: #163046;
  --md-blue:   #0095db;   /* azul del logo MD oficial */
  --md-blue-2: #33afef;   /* tinte claro: hover / texto de realce */
  --md-blue-3: #7fd2f8;   /* tinte más claro: etiquetas sutiles */
  --md-ink:    #04141f;   /* tinta oscura para texto sobre el celeste brillante */
  --md-fg:     #eef4ff;
  --md-fg-2:   #e7f0ff;
  --md-fg-3:   #a6bad0;
  --md-fg-4:   #97adc6;
  --md-fg-5:   #93a9c2;
  --md-dim:    #7496bc;  /* ≥4,5:1 sobre md-bg */
  --md-dim-2:  #6a8cb2;
  --md-grid:   rgba(0, 149, 219, .05);

  --gutter: clamp(18px, 4vw, 76px);   /* padding lateral del contenedor (referencia: el nav) */
  --content-max: 1760px;              /* ancho máx. del contenido (referencia: el nav) */

  --hdr: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; width: auto; }

a { color: var(--yellow); text-decoration: none; }
a:hover { color: var(--yellow-hi); }

h1, h2, h3, p, pre { margin: 0; }
dl, dd, ul, ol, figure { margin: 0; padding: 0; }

button { font: inherit; }

/* Numerales de instrumento: Oxanium tabular en todo dato numérico */
.num, .gauge__val, .dyno__hp, .dyno__nm, .dyno__gain,
.catalog__price, .featured__price, .pdp__price, .meta-strip dd, .readout-strip dd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.mb-a { margin-bottom: clamp(18px, 2vw, 26px); }
.mb-b { margin-bottom: clamp(6px, 1vw, 12px); }
.mb-c { margin-bottom: clamp(16px, 2vw, 24px); }
.mt-a { margin-top: clamp(28px, 3vw, 40px); }
.mt-b { margin-top: clamp(24px, 3vw, 36px); }
.mt-c { margin-top: 28px; }
.mt-d { margin-top: clamp(22px, 2.6vw, 36px); }

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
[data-route='mdrepro'] .site-header :focus-visible { outline-color: var(--md-blue-2); }

h1[tabindex='-1']:focus,
h1[tabindex='-1']:focus-visible { outline: none; }

.pdp,
.form-review,
#consulta,
#arrepentimiento,
[data-route='legales'] .sect[id] { scroll-margin-top: calc(var(--hdr) + 16px); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  height: 44px; padding: 0 16px;
  display: flex; align-items: center;
  background: var(--yellow); color: var(--bg);
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .06em;
  transition: top .15s;
}
.skip-link:focus { top: 12px; color: var(--bg); }

/* --------------------------------------------------------------- layout -- */
/* Contenedor ÚNICO. Nav, hero, footer y TODAS las secciones lo usan, así el borde
   izquierdo del contenido coincide siempre con el del logo del nav (misma X en todo
   breakpoint). No cappear el ancho por-ruta: eso desalinea. Si una sección necesita
   contenido más angosto, usar un max-width INTERNO alineado a la izquierda, nunca el
   .container. Los fondos full-bleed van en el elemento externo (.sect / .mux-sect). */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.sect { border-bottom: 1px solid var(--line); }
.sect--alt { background: var(--bg-alt); }
.sect--rel { position: relative; }

/* grilla de señal: sólo en secciones marcadas, para no abusar */
.sect--grid { background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: center -1px;
}
.md.sect--grid { background-image:
    linear-gradient(var(--md-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--md-grid) 1px, transparent 1px);
}

.sect__inner { padding-block: clamp(28px, 3.4vw, 48px); }
.sect__inner--head  { padding-top: clamp(24px, 3vw, 40px);   padding-bottom: clamp(28px, 3.4vw, 48px); }
.sect__inner--head2 { padding-top: clamp(24px, 3vw, 40px);   padding-bottom: clamp(30px, 3.6vw, 52px); }
.sect__inner--head3 { padding-top: clamp(24px, 3vw, 40px);   padding-bottom: clamp(20px, 2.4vw, 32px); }
.sect__inner--tight { padding-block: clamp(28px, 3vw, 44px); }
.sect__inner--wide  { padding-block: clamp(32px, 4vw, 60px); }
.sect__inner--wide2 { padding-block: clamp(32px, 4vw, 56px); }
.sect__inner--flush { padding-block: 0; }

.hero-grid, .col3, .col2, .deriv, .respaldo { display: grid; }
.hero-grid, .col3, .col2, .deriv { grid-template-columns: 1fr; }
.respaldo { grid-template-columns: 1fr 1fr; list-style: none; }

@media (min-width: 720px) {
  .respaldo { grid-template-columns: repeat(4, 1fr); }
  .deriv    { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; }
  .col3      { grid-template-columns: repeat(3, 1fr); }
  .col2      { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 620px) and (max-width: 899px) {
  .col3 { grid-template-columns: 1fr 1fr; }
  .divisions .division:nth-child(2),
  .steps > *:nth-child(2) { border-right: none; }
  .divisions .division:nth-child(3),
  .steps > *:nth-child(3),
  .featured .featured__item:nth-child(3),
  .trust > *:nth-child(3) { grid-column: 1 / -1; }
  .divisions .division:nth-child(3),
  .steps > *:nth-child(3) { border-right: none; }

  .divisions .division:nth-child(3) {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: clamp(16px, 2.4vw, 24px);
  }
  .divisions .division:nth-child(3) .division__tag { grid-column: 1 / -1; grid-row: 1; }
  .divisions .division:nth-child(3) .ph--card { grid-column: 1; grid-row: 2 / 5; height: 100%; min-height: 132px; }
  .divisions .division:nth-child(3) h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .divisions .division:nth-child(3) p { grid-column: 2; grid-row: 3; }
  .divisions .division:nth-child(3) .division__cta { grid-column: 2; grid-row: 4; align-self: end; }

  .featured .featured__item:nth-child(3) {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(14px, 2vw, 20px);
  }
  .featured .featured__item:nth-child(3) .ph--thumb { grid-column: 1; grid-row: 1 / 4; height: 100%; min-height: 110px; }
  .featured .featured__item:nth-child(3) .featured__ref { grid-column: 2; grid-row: 1; margin-top: 0; }
  .featured .featured__item:nth-child(3) b { grid-column: 2; grid-row: 2; }
  .featured .featured__item:nth-child(3) .featured__price { grid-column: 2; grid-row: 3; align-self: start; }
}
@media (max-width: 619px) {
  .division, .steps > * { border-right: none; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .works .col2, .locations { grid-template-columns: 1fr 1fr; }
  .locations .location + .location { border-top: none; border-left: 1px solid var(--line-soft); }
}

.gap-hair { gap: 2px; }
.gap-lg   { gap: clamp(24px, 3vw, 40px); }
.gap-xl   { gap: clamp(24px, 3vw, 48px); }
.align-start { align-items: start; }

.js [data-route] { display: none; }
.js [data-route].is-active { display: block; }
html:not(.js) .finder,
html:not(.js) .finder__count,
html:not(.js) .form-review,
html:not(.js) #form-submit,
html:not(.js) #arrepentimiento button[type='submit'] { display: none; }

.nojs-note { display: none; }
html:not(.js) .nojs-note {
  display: block;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--yellow-line);
  background: var(--yellow-wash);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-2);
}
html:not(.js) .nojs-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------ nav -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--hdr);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 30px; }
/* en la ruta MD Repro, el logo del nav pasa a ser el de MDREPRO */
.brand__md { display: none; }
[data-route='mdrepro'] .brand__inye { display: none; }
[data-route='mdrepro'] .brand__md { display: block; height: 22px; }

.nav { align-items: center; }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 26px); list-style: none; }
.nav__list .navlink { white-space: nowrap; }

.navlink {
  color: var(--fg-2);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .05em;
  padding: 8px 2px;
  transition: color .15s;
  cursor: pointer;
}
.navlink:hover { color: var(--yellow); }
.navlink[aria-current='page'] { color: var(--yellow); }

.site-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.btn-shop {
  align-items: center; flex: 0 0 auto; white-space: nowrap;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--yellow); color: var(--yellow);
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .05em;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-shop:hover { background: var(--yellow); color: var(--bg); }

.btn-wa-mini {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; white-space: nowrap; gap: 7px;
  height: 44px; padding: 0 12px; min-width: 44px;
  background: var(--wa); color: var(--wa-ink);
  font-weight: 700; font-size: 12px; letter-spacing: .04em;
}
.btn-wa-mini:hover { background: #1fbe5b; color: var(--wa-ink); }
.btn-wa-mini img { height: 16px; }

.burger {
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--line-ui);
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  cursor: pointer; padding: 0;
}
.burger span {
  width: 19px; height: 1.5px; background: var(--fg);
  transition: transform .22s var(--ease), opacity .12s linear, background .15s;
}
.burger span:last-child { background: var(--yellow); }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--fg); }

.menu {
  display: flex; flex-direction: column;
  padding-top: 6px; padding-bottom: max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-hair);
}
.menu[hidden] { display: none; }
.menu .navlink {
  display: flex; align-items: center; min-height: 48px; padding: 6px 0;
  border-bottom: 1px solid var(--line-hair); font-size: 15px;
}
.menu .navlink:last-child { border-bottom: none; }
.menu .navlink--minor { font-size: 13px; color: var(--fg-5); }

.nav, .only-lg { display: none; }
.burger { display: flex; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .only-lg { display: flex; }
  .burger { display: none; }
  .menu { display: none !important; }
}
@media (max-width: 1079px) { .btn-shop { display: none; } }

/* territorio cian */
[data-route='mdrepro'] .site-header { background: var(--md-bg); border-bottom-color: var(--md-line); }
[data-route='mdrepro'] .navlink:hover,
[data-route='mdrepro'] .navlink[aria-current='page'] { color: var(--md-blue-2); }
[data-route='mdrepro'] .burger { border-color: var(--md-line); }
[data-route='mdrepro'] .burger span:last-child { background: var(--md-blue-2); }
[data-route='mdrepro'] .burger[aria-expanded='true'] span:nth-child(3) { background: var(--fg); }
[data-route='mdrepro'] .btn-shop { display: none; } /* en Reprogramación no va el botón de tienda */
[data-route='mdrepro'] .menu,
[data-route='mdrepro'] .menu .navlink { border-color: var(--md-line-2); }

/* -------------------------------------------------------- tipografía ---- */
.sheet-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--fg-9);
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-hair);
  /* traza de señal: hairline con un segmento ámbar vivo a la izquierda */
  background-image: linear-gradient(90deg, var(--yellow) 0, var(--yellow) 46px, transparent 46px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}
.sheet-bar b { font-weight: 600; color: var(--fg-7); }
@media (max-width: 559px) {
  .sheet-bar { flex-direction: column; align-items: flex-start; gap: 5px; }
}
.md .sheet-bar { color: var(--md-dim-2); border-bottom-color: var(--md-line-4);
  background-image: linear-gradient(90deg, var(--md-blue) 0, var(--md-blue) 46px, transparent 46px); }
.md .sheet-bar b { color: var(--md-dim-2); }

.fig {
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  letter-spacing: .24em; color: var(--yellow);
}
.fig-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--fg-7); }

.h-display {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(30px, 4.8vw, 58px);
  line-height: 1.03;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--fg-hi);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h-display--sm { font-size: clamp(26px, 4vw, 46px); line-height: 1.06; }

.h-sec {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(21px, 2.7vw, 32px);
  text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance;
}
.h-sec--sm { font-size: clamp(18px, 2.2vw, 26px); }

.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

.lede { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: var(--fg-3); text-wrap: pretty; }
.lede--sm     { font-size: 15px; }
.lede--narrow { max-width: 600px; margin: 12px 0 0; }
.lede--shop   { max-width: 640px; margin: 14px 0 0; }

.intro { font-size: 15px; color: var(--fg-4); max-width: 640px;
  margin: 0 0 clamp(22px, 2.6vw, 32px); line-height: 1.55; text-wrap: pretty; }

/* --------------------------------------------------------------- botones -- */
.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 clamp(20px, 2.5vw, 34px);
  font-weight: 700; font-size: 14px; letter-spacing: .03em;
  cursor: pointer; border: none; text-align: center;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn__wa { height: 17px; }
.btn--block { width: 100%; }
.btn--solid { background: var(--yellow); color: #1A1305; box-shadow: 0 0 0 rgba(0,0,0,0); }
.btn--solid:hover { background: var(--yellow-hi); color: #1A1305; box-shadow: 0 6px 22px -10px var(--glow); }

.btn--ghost { border: 1px solid var(--line-str); color: var(--fg); font-weight: 600; background: none; }
.btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }

.btn--blue { background: var(--md-blue); color: var(--md-ink); padding: 0 30px; }
.btn--blue:hover { background: var(--md-blue-2); color: var(--md-ink); box-shadow: 0 6px 22px -10px rgba(0,149,219,.5); }

.btn--wa {
  gap: 8px; padding: 0 22px;
  border: 1px solid var(--wa-line); color: var(--wa);
  font-weight: 600; font-size: 13px; letter-spacing: .04em; background: none;
}
.btn--wa:hover { background: rgba(37, 211, 102, .1); color: var(--wa); }
.btn--wa img { height: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0; }
.btn-row .btn--ghost, .btn-row .btn--wa { border-left: none; }
.btn--wide { padding: 0 28px; }

.linkish {
  background: none; border: none; padding: 0;
  color: var(--yellow); cursor: pointer; font: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--yellow-hi); }

.field-link { transition: background .15s; cursor: pointer; }
.field-link:hover { background: var(--bg-hover); }

/* ------------------------------------------------------- placeholders ---- */
.ph {
  border: 1px dashed var(--line-mid);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--fg-8); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; padding: 12px;
}
.ph--tall   { height: clamp(120px, 14vw, 150px); }
.ph--card   { height: 120px; }
.ph--thumb  { height: 100px; font-size: 8px; letter-spacing: .1em; }
.ph--work   { height: clamp(120px, 14vw, 150px); align-items: flex-end; justify-content: flex-start; text-align: left; }
.ph--panel  { border: none; flex: 1; font-size: 10px; letter-spacing: .16em; line-height: 1.9; padding: 20px; }
.ph--pdp    { border: none; min-height: clamp(240px, 26vw, 380px); font-size: 10px; letter-spacing: .14em; line-height: 1.9; padding: 20px; }

/* foto real que reemplaza un placeholder: hereda el alto del slot (.ph--card,
   .ph--thumb, .ph--work, .ph--pdp) y recorta con cover. Mantiene el marco hairline. */
.ph-img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--line);
}
.ph-img.ph--pdp { min-height: clamp(240px, 26vw, 380px); }
/* fotos de división: mostrar el encuadre completo (16:9), no una banda de 120px */
.division .ph-img { height: auto; aspect-ratio: 16 / 9; }
/* destacados: la vista principal del producto, en marco 4:3 (normaliza aspectos) */
.featured .ph-img { height: auto; aspect-ratio: 4 / 3; }

/* galería de la ficha de producto: imagen grande 4:3 + fila de miniaturas */
.pdp__stage { position: relative; }
.pdp__main {
  display: block; width: 100%; height: auto;   /* height:auto: si no, el atributo height del <img> pisa el aspect-ratio */
  aspect-ratio: 1 / 1; object-fit: cover;       /* los productos son cuadrados: 1:1 los muestra completos */
  background: var(--surface);
}
/* el flag va sobre la foto (clara u oscura): chip con fondo para que siempre lea */
.pdp__flag {
  background: rgba(14, 12, 9, .82);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 2;
}
.pdp__thumbs { display: flex; gap: 2px; margin-top: 2px; }
.pdp__thumbs[hidden] { display: none; }
.pdp__thumb {
  flex: 1 1 0; padding: 0; cursor: pointer;
  aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--line); background: none;
  transition: border-color .15s;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; transition: opacity .15s; }
.pdp__thumb:hover img { opacity: .85; }
.pdp__thumb[aria-current='true'] { border-color: var(--yellow); }
.pdp__thumb[aria-current='true'] img { opacity: 1; }
.pdp__thumb:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* mapas de Contacto: embed real de Google Maps, filtrado a oscuro para pegar con la UI */
.location__map {
  position: relative;
  height: clamp(180px, 24vw, 240px);
  margin: 16px 0;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
}
.location__map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.72) brightness(0.95) contrast(0.9);
}
.location__dir {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 12px;
  background: rgba(14, 12, 9, .86);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border: 1px solid var(--line-ui);
  color: var(--fg);
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  transition: color .15s, border-color .15s;
}
.location__dir:hover { color: var(--yellow); border-color: var(--yellow); }
/* quien prefiere más contraste: mapa sin invertir (más legible, aunque claro) */
@media (prefers-contrast: more) {
  .location__map iframe { filter: none; }
}

/* ---------------------------------------------------------------- home --- */
.edge-rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: clamp(20px, 3vw, 44px);
  flex-direction: column; justify-content: space-between; align-items: center;
  padding: 20px 0; color: var(--line-mid);
  font-family: var(--mono); font-size: 10px;
  border-right: 1px solid var(--line-hair); display: none;
}
.edge-rail span[aria-current] { color: var(--yellow); }
@media (min-width: 900px) { .edge-rail { display: flex; } }

.hero { padding-top: clamp(20px, 3vw, 32px); }
.hero-grid { padding: clamp(24px, 4vw, 52px) 0; }
.hero__copy { padding-right: clamp(0px, 3vw, 40px); }
.hero__copy .fig { display: block; margin-bottom: clamp(16px, 2vw, 22px); }
.hero__copy .lede { margin: clamp(18px, 2vw, 26px) 0 0; max-width: 560px; }

/* claim: punto vivo + rótulo (reemplaza el número en caja de v1) */
.claim { display: flex; align-items: center; gap: 12px;
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(18px, 2vw, 24px); }
.claim__dot { position: relative; width: 10px; height: 10px; flex: 0 0 auto;
  border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-wash), 0 0 12px var(--glow); }
.claim__dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--yellow-line); }
.claim__txt { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--fg-2); }

/* punto "vivo" reutilizable */
.live { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--yellow); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 8px var(--glow); animation: live-breathe 2.4s ease-in-out infinite; }
@keyframes live-breathe { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.md .live, .dyno__delta .live { color: var(--md-blue-2); }
.md .live i, .dyno__delta .live i { background: var(--md-blue-2); box-shadow: 0 0 8px rgba(0,149,219,.5); }

/* dispositivo de instrumento (hero) */
.device {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  min-height: clamp(260px, 32vw, 420px);
  display: flex; flex-direction: column;
  margin-top: 24px;
  box-shadow: inset 0 0 0 1px rgba(245,180,0,.04), inset 0 1px 40px -20px var(--glow);
}
@media (min-width: 900px) { .device { margin-top: 0; } }
.device__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); }
.device__ch { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--fg-7); }
.device__body { display: grid; grid-template-columns: 1fr; gap: 0; flex: 1; }
@media (min-width: 560px) { .device__body { grid-template-columns: 168px 1fr; } }
.device__feed { border: none; border-top: 1px solid var(--line); }
@media (min-width: 560px) { .device__feed { border-top: none; border-left: 1px solid var(--line); } }

/* gauge de arco */
.gauge { --gauge: .5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 20px 14px; text-align: center; }
.gauge__svg { width: min(160px, 60%); height: auto; overflow: visible; }
.gauge__track { stroke: var(--yellow-line); }
.gauge__fill  { stroke: var(--yellow); pathLength: 100; stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--gauge) * 100);
  filter: drop-shadow(0 0 4px var(--glow));
  transition: stroke-dashoffset .9s var(--ease); }
.gauge__needle { stroke: var(--fg-hi); transform-origin: 60px 72px;
  transform: rotate(calc((var(--gauge) - .5) * 180deg));
  transition: transform .9s var(--ease); }
.gauge__hub { fill: var(--yellow); }
.gauge__val { font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--fg-hi); line-height: 1; margin-top: 2px; }
.gauge__cap { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--yellow); }

.readout-strip { display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 10px; }
.readout-strip > div { padding: 9px 10px; border-right: 1px solid var(--line); }
.readout-strip > div:last-child { border-right: none; }
.readout-strip dt { color: var(--fg-8); letter-spacing: .12em; margin: 0; }
.readout-strip dd { color: var(--fg-2); margin: 3px 0 0; }
.readout-strip dd.is-rev { color: var(--yellow); }

/* derivador */
.deriv { border: 1px solid var(--line); }
.deriv__item { display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 24px); color: var(--fg);
  min-height: 64px; border-bottom: 1px solid var(--line-soft); }
.deriv__item:last-child { border-bottom: none; }
.deriv__n { font-family: var(--mono); color: var(--yellow); font-size: 12px; width: 24px; flex: 0 0 auto; }
.deriv__body { flex: 1; }
.deriv__body b { font-weight: 800; font-size: clamp(17px, 1.7vw, 21px); }
.deriv__body span { display: block; font-size: 13px; color: var(--fg-5); margin-top: 3px; }
.deriv__arrow { color: var(--yellow); font-size: 20px; }
@media (min-width: 720px) {
  .deriv__item:nth-child(odd) { border-right: 1px solid var(--line-soft); }
  .deriv__item:nth-child(3), .deriv__item:nth-child(4) { border-bottom: none; }
}

/* respaldo */
.respaldo > li { border-right: 1px solid var(--line-soft); display: flex; }
.respaldo > li:last-child { border-right: none; }
.respaldo__item { display: block; flex: 1; padding: clamp(20px, 2.4vw, 30px) clamp(12px, 1.6vw, 22px); color: inherit; }
.respaldo__item b { display: block; font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--yellow); letter-spacing: .08em; }
.respaldo__item > span { display: block; font-size: 13px; color: var(--fg-3); margin-top: 6px; line-height: 1.45; }
a.respaldo__item:hover b { color: var(--yellow-hi); }
@media (max-width: 719px) {
  .respaldo > li:nth-child(2n) { border-right: none; }
  .respaldo > li:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

/* divisiones */
.divisions { border: 1px solid var(--line); }
.division { padding: clamp(16px, 1.6vw, 22px); border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.division:last-child { border-right: none; }
.division__tag { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--yellow); margin-bottom: 14px; }
.division__tag span { color: var(--fg-8); }
.division h3 { font-weight: 800; font-size: 20px; margin: 14px 0 0; }
.division p { font-size: 13.5px; color: var(--fg-3); margin: 6px 0 14px; line-height: 1.5; }
.division__cta { display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 0 14px; border: 1px solid var(--line-ui); color: var(--fg);
  font-family: var(--mono); font-size: 12px; letter-spacing: .05em; }
.division__cta span { color: var(--yellow); }
.division__cta--solid { background: var(--yellow); color: #1A1305; border: none; font-weight: 600; }
.division__cta--solid span { color: inherit; }
.division__cta--solid:hover { background: var(--yellow-hi); color: #1A1305; }

/* destacados */
.featured { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.featured__item { background: var(--bg); padding: 14px; color: var(--fg); }
.featured__ref { display: block; font-family: var(--mono); font-size: 10px; color: var(--yellow); margin-top: 10px; }
.featured__item b { display: block; font-weight: 700; font-size: 14px; margin-top: 2px; }
.featured__price { display: block; font-size: 14px; color: var(--fg-hi); margin-top: 6px; font-weight: 600; }
.featured__price--ask { color: var(--fg-5); font-weight: 400; font-family: var(--mono); font-size: 13px; }

.link-mono { display: inline-flex; align-items: center; min-height: 32px;
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .08em; color: var(--yellow); }

/* servicios / celdas */
.grid-cells { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.grid-cells > * { padding: clamp(16px, 1.8vw, 22px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cell__n { font-family: var(--mono); font-size: 11px; color: var(--yellow); }
.cell b { display: block; font-weight: 700; font-size: 16px; margin-top: 8px; }
.cell span { font-size: 13px; color: var(--fg-3); }

.steps { border: 1px solid var(--line); margin-bottom: clamp(28px, 3vw, 40px); }
.steps > * { padding: clamp(18px, 2vw, 26px); border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.steps > *:last-child { border-right: none; }

/* ficha técnica / readout tabular */
.spec { border: 1px solid var(--line); background: var(--surface); }
.spec__head { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-weight: 600; font-size: 9px;
  letter-spacing: .16em; color: var(--yellow); text-transform: none; }
.spec__head span { color: var(--fg-8); font-weight: 400; }
.spec__row { display: flex; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--line-hair);
  font-size: 13px; align-items: baseline; }
.spec__row:last-child { border-bottom: none; }
.spec__n { font-family: var(--mono); color: var(--yellow); width: 18px; flex: 0 0 auto; font-size: 11px; }
.spec__k { font-family: var(--mono); color: var(--fg-6); flex: 0 0 106px; letter-spacing: .05em; font-size: 11px; }
.spec__v { flex: 1; min-width: 0; line-height: 1.5; }
.spec__v a { text-decoration: underline; text-underline-offset: 2px; }
.spec__foot { padding: 12px; border-top: 1px solid var(--line-hair); }
.spec--compact .spec__row { padding: 11px 12px; }
.spec--compact .spec__k { flex-basis: 92px; }
@media (min-width: 900px) { .spec--sticky { position: sticky; top: calc(var(--hdr) + 20px); } }

.works-title { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .2em; color: var(--fg-7); margin-bottom: 14px; }
.works { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.cross-link { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); padding: 0 18px; min-height: 64px; color: var(--fg); }
.cross-link span:first-child { font-size: 14px; }
.cross-link span:last-child { color: var(--yellow); font-size: 18px; }
.md .cross-link { border-color: var(--md-line); color: var(--md-fg); }
.md .cross-link span:last-child { color: var(--md-blue-2); }
.md .cross-link:hover { background: var(--md-bg-3); }

/* cómo enviar un módulo */
.howto { list-style: none; border: 1px solid var(--line); }
.howto li { display: flex; gap: 14px; padding: clamp(14px, 1.6vw, 18px); border-bottom: 1px solid var(--line-hair); }
.howto li:last-child { border-bottom: none; }
.howto__n { font-family: var(--mono); font-size: 11px; color: var(--yellow); flex: 0 0 22px; padding-top: 2px; }
.howto b { display: block; font-weight: 700; font-size: 15px; }
.howto p { font-size: 13.5px; color: var(--fg-3); line-height: 1.55; margin-top: 5px; max-width: 62ch; }

/* ------------------------------------------------------------- tienda ---- */
.shop-title { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: clamp(22px, 2.6vw, 36px); }
.shop-title h1 { font-size: clamp(26px, 3.6vw, 42px); }
.shop-title .badge { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--yellow); letter-spacing: .08em; }

.finder { display: flex; flex-wrap: wrap; border: 1px solid var(--line); margin-top: clamp(22px, 2.6vw, 32px); background: var(--surface); }
.finder__field { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 16px; min-height: 56px; border-right: 1px solid var(--line); }
.finder__icon { color: var(--yellow); flex: 0 0 auto; }
.finder__input { flex: 1; align-self: stretch; background: none; border: none; color: var(--fg);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; min-width: 0; }
.finder__input::placeholder { color: var(--fg-9); }
.finder__input::-webkit-search-cancel-button { display: none; }
.finder__input:focus { outline: none; }
.finder__field:focus-within { background: var(--bg-hover); }
.finder__clear { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--fg-5); font-size: 20px; line-height: 1; }
.finder__clear:hover { color: var(--yellow); }
.finder__clear[hidden] { display: none; }

.finder__chips { display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 56px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  background: none; border: 1px solid var(--line-ui); font-family: var(--mono); font-size: 11px;
  color: var(--fg-2); letter-spacing: .05em; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.chip:hover { color: var(--yellow); border-color: var(--yellow); }
.chip[aria-pressed='true'] { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-wash); }
.chip[hidden] { display: none; }

.finder__count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--fg-5); margin-top: 8px; min-height: 44px; }
.finder__count b { color: var(--yellow); font-weight: 600; }
.finder__reset { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  background: none; border: 1px solid var(--line-ui); color: var(--fg-2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; cursor: pointer; transition: color .15s, border-color .15s; }
.finder__reset:hover { color: var(--yellow); border-color: var(--yellow); }
.finder__reset[hidden] { display: none; }

.catalog { width: 100%; border-collapse: collapse; font-size: 13px; }
.catalog th { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--fg-7);
  text-align: left; font-weight: 500; padding: 9px 12px; border-top: 1px solid var(--line-mid); border-bottom: 1px solid var(--line-mid); }
.catalog th:nth-child(2) { padding-inline: 8px; }
.catalog th:last-child { text-align: right; }
.catalog td { border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.catalog__row { transition: background .15s; }
.catalog__row:hover { background: var(--bg-hover); cursor: pointer; }
.catalog__row.is-current { background: var(--bg-sel); box-shadow: inset 2px 0 0 var(--yellow); }
.catalog__cod { padding: 16px 12px; font-family: var(--mono); color: var(--yellow); font-weight: 600; }
.catalog__desc { padding: 0; }
.catalog__link { display: block; padding: 16px 8px; color: var(--fg); }
.catalog__link:hover { color: var(--fg); }
.catalog__link[aria-current='true'] b { color: var(--yellow); }
.catalog__ref { display: block; font-family: var(--mono); font-size: 11px; color: var(--yellow); }
.catalog__link b { font-weight: 700; font-size: clamp(15px, 1.5vw, 17px); }
.catalog__link small { display: block; color: var(--fg-5); font-size: 12px; margin-top: 2px; }
.catalog__price { padding: 16px 12px; text-align: right; color: var(--fg-hi); font-weight: 600; white-space: nowrap; }
.catalog__price--ask { color: var(--fg-5); font-weight: 400; }
.catalog__empty td { padding: clamp(22px, 3vw, 32px) 12px; text-align: center; border-bottom: none; }
.catalog__empty b { display: block; font-size: 15px; font-weight: 700; }
.catalog__empty-text { display: block; font-size: 13px; color: var(--fg-3); margin: 8px auto 18px; max-width: 46ch; line-height: 1.5; }
.catalog__empty .catalog__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0 auto; max-width: 520px; text-align: center; }
.catalog__empty .catalog__empty-actions > * { flex: 1 1 200px; min-width: 0; }
.catalog__empty .catalog__empty-actions .btn--wa { border-left: none; }
@media (max-width: 560px) {
  .catalog__empty .catalog__empty-actions { flex-direction: column; }
  .catalog__empty .catalog__empty-actions > * { flex: 0 0 auto; }
  .catalog__empty .catalog__empty-actions .btn--wa { border-left: 1px solid var(--wa-line); border-top: none; }
}

/* ficha de producto */
.pdp { border: 1px solid var(--line); margin-top: clamp(28px, 3vw, 44px); background: var(--surface); }
.pdp[hidden] { display: none; }
.pdp__bar { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-weight: 600; font-size: 10px;
  letter-spacing: .16em; color: var(--fg-7); text-transform: none; }
.pdp__bar span { color: var(--yellow); }
.pdp__media { position: relative; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .pdp__media { border-bottom: none; border-right: 1px solid var(--line); } }
.pdp__flag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 9px;
  color: var(--yellow); border: 1px solid var(--yellow-line); padding: 3px 7px; letter-spacing: .1em; }
.pdp__flag[hidden] { display: none; }
.pdp__body { padding: clamp(18px, 2vw, 28px); }
.pdp__ref { font-family: var(--mono); font-size: 12px; color: var(--yellow); }
.pdp__body h3 { font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); margin: 6px 0 0; line-height: 1.15; }
.pdp__body .spec { margin-top: 18px; background: var(--bg); }
.pdp__price { font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); margin-top: 18px; color: var(--fg-hi); }
.pdp__price small { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--fg-5); }

.pdp__gate { list-style: none; margin-top: 16px; border-top: 1px solid var(--line-hair); }
.pdp__gate li { display: flex; gap: 10px; padding: 9px 0; font-size: 13px; color: var(--fg-2);
  line-height: 1.45; border-bottom: 1px solid var(--line-hair); }
.pdp__gate li::before { content: '✓'; color: var(--yellow); font-family: var(--mono); font-size: 11px; flex: 0 0 auto; line-height: 1.55; }

.notice { border: 1px solid var(--yellow); padding: 12px 14px; margin-top: 14px; display: flex; gap: 10px;
  align-items: flex-start; background: var(--yellow-wash); }
.notice__mark { color: var(--yellow); font-size: 15px; line-height: 1; }
.notice p { font-size: 13px; line-height: 1.45; color: var(--fg-note); }
.notice a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.notice[hidden] { display: none; }

.pdp__actions { display: flex; flex-wrap: wrap; gap: 0; margin-top: 14px; }
.pdp__actions > * { flex: 1; min-width: 200px; }
.pdp__actions .btn--solid { gap: 8px; }
.pdp__actions .btn--solid img { height: 17px; }

.trust > * { padding: clamp(16px, 1.8vw, 22px); }
.trust dt { font-family: var(--mono); font-size: 10px; color: var(--yellow); letter-spacing: .12em; margin: 0; }
.trust dd { font-size: 13px; color: var(--fg-3); margin: 8px 0 0; line-height: 1.5; }
.trust dd a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ------------------------------------------------------------ MD Repro --- */
.md { background: var(--md-bg); border-bottom: 1px solid var(--md-line-3); }
.md__brand { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 20px; padding-top: clamp(22px, 2.6vw, 36px); }
.md__brand img { height: clamp(104px, 13vw, 196px); }
.md__where { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--md-blue-3); }

/* marca de la sección Repuestos (espeja a .md__brand) */
.shop-brand { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 20px; padding-top: clamp(22px, 2.6vw, 36px); }
.shop-brand img { height: clamp(60px, 8.2vw, 108px); }
/* La cabecera de Repuestos comparte esta barra con la de Electrónica (que usa
   INYEMD-24). Acá el alto se fija directo, así que el lockup apilado necesita
   el mismo 1,4235 para que ambos wordmarks midan igual. */
[data-route='repuestos'] .shop-brand img { height: clamp(85px, 11.7vw, 154px); }
.shop-brand__where { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--yellow); }
.shop-brand + .shop-title,
.shop-brand + .prose { padding-top: clamp(12px, 1.6vw, 18px); }

.md__grid { padding-top: clamp(22px, 2.6vw, 34px); }
.md h1 { color: var(--md-fg); font-size: clamp(26px, 3.8vw, 46px); }
.md__lede { color: var(--md-fg-3); margin: 18px 0 0; max-width: 520px; }
.md .btn-row { margin-top: 28px; }
.md .btn--wa { border-color: #1d4a4a; }

.md .spec { border-color: var(--md-line); background: var(--md-bg-2); }
.md .spec__head { border-bottom-color: var(--md-line); color: var(--md-blue-2); }
.md .spec__head span { color: var(--md-dim-2); }
.md .spec__row { border-bottom-color: var(--md-line-2); }
.md .spec__n { color: var(--md-blue-2); }
.md .spec__k { color: var(--md-dim); flex-basis: 90px; }
.md .spec__v { color: var(--md-fg-2); }

/* dyno como readout doble antes→después */
.dyno-card { box-shadow: inset 0 1px 40px -22px rgba(0,149,219,.5); }
.dyno { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--md-line-2); }
.dyno > div { padding: 14px 12px; position: relative; }
.dyno__before { border-right: 1px solid var(--md-line-2); }
.dyno__after { background: var(--md-bg-3); }
.dyno dt { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--md-dim); margin: 0; }
.dyno__after dt { color: var(--md-blue-2); }
.dyno__hp { font-size: clamp(16px, 1.8vw, 20px); color: var(--md-fg-4); margin: 8px 0 0; display: block; }
.dyno__nm { font-size: 13px; color: var(--md-fg-5); margin: 2px 0 0; display: block; }
.dyno__after .dyno__hp { font-weight: 700; font-size: clamp(18px, 2vw, 24px); color: var(--md-blue-2); text-shadow: 0 0 14px rgba(0,149,219,.35); }
.dyno__after .dyno__nm { font-weight: 600; color: var(--md-blue-2); }
.dyno__delta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; border-top: 1px solid var(--md-line-2); }
.dyno__gain { font-weight: 700; font-size: 14px; color: var(--md-blue-2); }

.md__label { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .2em; color: var(--md-dim-2); margin-bottom: 16px; text-transform: none; }
.md .grid-cells { border-left-color: var(--md-line); border-top-color: var(--md-line); }
.md .grid-cells > * { border-right-color: var(--md-line); border-bottom-color: var(--md-line); }
.md .cell b { font-weight: 800; font-size: 17px; color: var(--md-fg); }
.md .cell span { color: var(--md-fg-3); }
.md .cell--tag { display: flex; align-items: center; }
.md .cell--tag span { font-family: var(--mono); font-size: 11px; color: var(--md-blue-2); letter-spacing: .05em; }

.md__note { border: 1px solid var(--md-line); border-top: none; padding: 14px 16px; display: flex; gap: 10px;
  align-items: flex-start; background: var(--md-bg-2); }
.md__note span:first-child { color: var(--md-blue-2); font-size: 14px; line-height: 1; }
.md__note p { font-size: 13px; color: var(--md-fg-3); line-height: 1.45; }

/* ----------------------------------------------------------- nosotros ---- */
.prose { padding-top: clamp(24px, 3vw, 44px); max-width: 820px; }
.prose .fig { display: block; margin-bottom: 18px; }
.prose .lede { margin: 20px 0 0; line-height: 1.6; max-width: 68ch; }

.matrix { border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; background: var(--surface); }
.matrix__row { display: grid; grid-template-columns: 1.1fr 1.4fr .8fr; border-bottom: 1px solid var(--line-hair); }
.matrix__row:last-child { border-bottom: none; }
.matrix__row > * { padding: 13px 12px; border-right: 1px solid var(--line-hair); }
.matrix__row > *:last-child { border-right: none; }
.matrix__head { border-bottom: 1px solid var(--line); color: var(--fg-7); font-size: 9px; letter-spacing: .14em; }
.matrix__head > * { padding: 9px 12px; border-right: 1px solid var(--line); }
.matrix__brand { color: var(--yellow); }
.matrix__brand--md { color: var(--md-blue-2); }
.matrix__role { color: var(--fg-2); font-family: var(--sans); font-size: 13px; }
.matrix__where { color: var(--fg-3); }

.pillar { border: 1px solid var(--line); padding: clamp(18px, 2vw, 26px); background: var(--surface); }
.pillar dt { font-family: var(--mono); font-weight: 600; font-size: 10px; color: var(--yellow); letter-spacing: .14em; margin: 0; }
.pillar dd { font-size: 14px; color: var(--fg-2); margin: 10px 0 0; line-height: 1.55; }

/* ------------------------------------------------------------ contacto --- */
.locations { border: 1px solid var(--line); margin-top: clamp(24px, 3vw, 36px); }
.location { padding: clamp(20px, 2.4vw, 32px); }
.location + .location { border-top: 1px solid var(--line-soft); }
@media (min-width: 900px) { .location + .location { border-top: none; border-left: 1px solid var(--line-soft); } }
.location__city { font-family: var(--mono); font-weight: 600; font-size: 11px; color: var(--yellow); letter-spacing: .14em; text-transform: none; }
.location__who { font-size: 13px; color: var(--fg-5); margin-top: 4px; }
.location .ph { margin: 16px 0; }
.location address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--fg-2); }
.location__tel { list-style: none; font-family: var(--mono); font-size: 12px; color: var(--fg-3); margin-top: 12px; border-top: 1px solid var(--line-hair); }
.location__tel li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; border-bottom: 1px solid var(--line-hair); }
.location__tel-k { color: var(--fg-6); letter-spacing: .06em; flex: 0 0 108px; }
.location__tel a { display: flex; align-items: center; min-height: 44px; color: var(--fg-2); }
.location__tel a:hover { color: var(--yellow); }
.location__wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 16px;
  border: 1px solid var(--wa-line); color: var(--wa); font-weight: 600; font-size: 12px; letter-spacing: .06em; }
.location__wa:hover { background: rgba(37, 211, 102, .1); color: var(--wa); }
.location__wa img { height: 15px; }

.form-panel { border: 1px solid var(--line); margin-top: clamp(24px, 3vw, 36px); background: var(--surface); }
.form-panel__bar { padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono);
  font-weight: 600; font-size: 10px; letter-spacing: .16em; color: var(--fg-7); text-transform: none; }
.form-panel__body { padding: clamp(18px, 2vw, 26px); }

.form-grid { border: 1px solid var(--line); }
.form-field { display: block; padding: 10px 14px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); cursor: text; }
.form-field:focus-within { background: var(--bg-hover); }
.form-field--full { grid-column: 1 / -1; border-right: none; border-bottom: none; }
@media (max-width: 899px) { .form-field { border-right: none; } }
@media (min-width: 900px) { .form-field:nth-child(2n) { border-right: none; } }
.form-field__label { display: block; font-family: var(--mono); font-size: 9px; color: var(--yellow); letter-spacing: .12em; }
.form-field__label em { font-style: normal; color: var(--fg-6); letter-spacing: .05em; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--line-ui);
  color: var(--fg); font-family: var(--sans); font-size: 15px; padding: 0 0 6px; margin-top: 8px; }
.form-field input, .form-field select { min-height: 34px; }
.form-field textarea { min-height: 76px; resize: vertical; line-height: 1.45; padding-top: 4px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--fg-9); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-bottom-color: var(--yellow); }
.form-field select { -webkit-appearance: none; appearance: none; cursor: pointer; min-height: 44px; padding: 0 34px 6px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F5B400' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 8px; }
.form-field select option { background: var(--bg); color: var(--fg); }

.form-field__err { display: block; margin-top: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--red); line-height: 1.4; }
.form-field__err[hidden] { display: none; }
.form-field.is-invalid { background: var(--red-wash); }
.form-field.is-invalid .form-field__label { color: var(--red); }
.form-field.is-invalid input, .form-field.is-invalid select, .form-field.is-invalid textarea { border-bottom-color: var(--red); }

.form-dest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 16px; padding: 11px 13px;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; }
.form-dest__k { color: var(--fg-6); }
.form-dest__v { color: var(--yellow); }

.form-status { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--fg-5); min-height: 16px; line-height: 1.4; }
.form-status[data-state='error'] { color: var(--red); }
.form-status:empty { margin-top: 0; min-height: 0; }

.form-panel .btn, .arrep .btn--block { margin-top: 14px; gap: 8px; }

.form-review { border: 1px solid var(--yellow-line); margin-top: 4px; }
.form-review[hidden] { display: none; }
.form-review__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--yellow-line); background: var(--yellow-wash); font-family: var(--mono);
  font-size: 10px; letter-spacing: .16em; color: var(--yellow); }
.form-review__bar span { color: var(--fg-2); }
.form-review__body { padding: clamp(16px, 2vw, 22px); }
.form-review__note { font-size: 13px; color: var(--fg-3); line-height: 1.5; }
.form-review__msg { margin-top: 14px; padding: 14px; border: 1px solid var(--line); background: var(--bg-alt);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--fg-2); white-space: pre-wrap;
  overflow-wrap: break-word; max-height: 340px; overflow-y: auto; }
.form-review__actions { display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px; }
.form-review__actions > * { flex: 1; min-width: 190px; }
.form-review__actions .btn--ghost { border-right: none; }
@media (max-width: 460px) { .form-review__actions .btn--ghost { border-right: 1px solid var(--line-str); } }
.form-review__fallback { margin-top: 14px; font-size: 12.5px; color: var(--fg-5); line-height: 1.6; }
.form-review__fallback a { text-decoration: underline; text-underline-offset: 2px; }
.form-review__copied { color: var(--wa); font-family: var(--mono); font-size: 11px; }

/* -------------------------------------------------------------- legales -- */
.legal-nav { display: grid; gap: 2px; margin-top: clamp(24px, 3vw, 34px); border: 1px solid var(--line); }
@media (min-width: 720px) { .legal-nav { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .legal-nav { grid-template-columns: repeat(3, 1fr); } }
.legal-nav a { display: flex; align-items: center; min-height: 52px; padding: 8px 16px; background: var(--surface);
  color: var(--fg-2); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; transition: background .15s, color .15s; }
.legal-nav a:hover { background: var(--bg-hover); color: var(--yellow); }

.legal { max-width: 72ch; }
.legal h3 { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .16em; color: var(--yellow);
  margin: clamp(24px, 3vw, 32px) 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line-hair); }
.legal h3:first-child { margin-top: 0; }
.legal p { font-size: 14.5px; line-height: 1.65; color: var(--fg-2); margin-top: 10px; text-wrap: pretty; }
.legal p b { color: var(--fg-hi); }
.legal p a { text-decoration: underline; text-underline-offset: 2px; }
.legal__fine { font-size: 12.5px; color: var(--fg-5); line-height: 1.6; }

.legal-links { display: grid; gap: 2px; margin-top: 18px; }
.legal-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 72px;
  padding: 14px 18px; border: 1px solid var(--line); color: var(--fg); }
.legal-link b { display: block; font-weight: 700; font-size: 15px; }
.legal-link span span { display: block; font-size: 13px; color: var(--fg-3); margin-top: 4px; line-height: 1.45; }
.legal-link__ext { color: var(--yellow); font-size: 17px; flex: 0 0 auto; }

.arrep { margin-top: 22px; }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--bg-alt); }
.site-footer__inner { padding-top: clamp(32px, 4vw, 52px); padding-bottom: max(clamp(24px, 3vw, 36px), env(safe-area-inset-bottom)); }
.footer-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.footer-brand img:first-of-type { height: 24px; }
.footer-brand img:last-of-type { height: 30px; } /* MDfoot lleva velocímetro: más alto para igualar el cuerpo de letra INYE */
.footer-brand .rule { width: 1px; height: 24px; background: var(--line); }
/* en pantallas chicas los dos logos no entran en una línea: se apilan y se oculta la regla */
@media (max-width: 600px) { .footer-brand .rule { display: none; } }
.site-footer p { font-size: 13px; color: var(--fg-5); line-height: 1.6; max-width: 340px; }
.footer-col__title { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: .16em; color: var(--fg-7); margin-bottom: 6px; }
.footer-col ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.footer-col .navlink { display: flex; align-items: center; min-height: 44px; padding: 0; font-family: var(--sans); font-size: 13px; }
.footer-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--line-ui); color: var(--fg); font-family: var(--mono); font-size: 11px; letter-spacing: .05em; }
.footer-back:hover { border-color: var(--yellow); color: var(--yellow); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  margin-top: clamp(24px, 3vw, 40px); padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--fg-9); line-height: 1.6; }

/* --------------------------------------------------------- wa flotante --- */
.wa-float { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); right: calc(20px + env(safe-area-inset-right));
  width: 56px; height: 56px; background: var(--wa); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 60; transition: transform .28s var(--ease), opacity .18s linear, background .15s; }
.wa-float:hover { background: #2ee070; transform: scale(1.06); }
.wa-float img { height: 28px; }
.wa-float.is-away { transform: translateY(150%); opacity: 0; pointer-events: none; }
.wa-float[hidden] { display: none; }

/* ------------------------------------------------------------ a11y prefs -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .live i { animation: none; opacity: 1; }
}

@media (prefers-contrast: more) {
  :root {
    --fg-3: #cfccc3; --fg-4: #cac7be; --fg-5: #c5c2b9;
    --fg-6: #c0bdb4; --fg-7: #bbb8af; --fg-8: #b6b3aa; --fg-9: #b1aea5;
    --line: #5a544b; --line-soft: #4d483f; --line-hair: #464139;
    --line-mid: #6c665b; --line-ui: #948e83; --line-str: #948e83;
    --md-fg-3: #cfdcea; --md-dim: #a8c0d8; --md-dim-2: #9db7d2; --md-fg-5: #b6c8da;
    --md-line: #3f6d9c; --md-line-2: #33587f;
  }
}

@media print {
  .site-header, .wa-float, .skip-link, .finder, .finder__count, .form-review { display: none !important; }
  .js [data-route] { display: block !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   HERO A SANGRE (v2) — la toma de banco ocupa todo el ancho; el texto va encima
   sobre el negro que la propia foto reserva a la izquierda. La tarjeta-instrumento
   (gauge + readout, con su motion) queda como overlay para conservar la identidad.
   ========================================================================== */
.hero-sect {
  position: relative;
  overflow: hidden;
  min-height: clamp(540px, 82vh, 780px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.hero__media {
  position: absolute; inset: 0; z-index: 0; margin: 0;
  /* fondo de respaldo: si la foto aún no está, el hero se ve intencional, no roto */
  background: radial-gradient(130% 110% at 82% 48%, rgba(90, 66, 28, .40), transparent 56%), var(--bg);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* velo: garantiza el negro a la izquierda aunque la foto traiga medios tonos */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--bg) 0%, rgba(14,12,9,.92) 28%, rgba(14,12,9,.58) 50%,
      rgba(14,12,9,.16) 72%, rgba(14,12,9,0) 88%),
    linear-gradient(0deg, rgba(14,12,9,.55), rgba(14,12,9,0) 34%);
}
.hero-sect .edge-rail { z-index: 3; }

.hero-sect .container.hero {
  position: relative; z-index: 2; width: 100%;
  padding-top: 0;
  padding-block: clamp(36px, 6vh, 72px);
}
/* El contenido del hero no se estira a lo ancho del shell (1760): se mantiene
   como una columna a la izquierda, sobre el negro, y la foto ocupa el resto.
   Escala con el viewport para llenar bien en pantallas grandes (1920+). */
.hero-sect .sheet-bar { max-width: 46rem; margin-bottom: clamp(18px, 2.4vw, 28px); }
.hero-sect .hero__copy { max-width: min(46rem, 52%); padding-right: 0; }
.hero-sect .hero__copy .h-display {
  font-size: clamp(30px, 3vw, 52px);
  line-height: 1.05;
  letter-spacing: -.015em;
  text-shadow: 0 1px 22px rgba(0, 0, 0, .55);
}
.hero-sect .hero__copy .lede { max-width: 40rem; font-size: clamp(15px, 1.15vw, 18px); }
@media (max-width: 767px) {
  .hero-sect .hero__copy,
  .hero-sect .sheet-bar { max-width: 100%; }
}

/* tarjeta-instrumento overlay */
.hero__inst.device {
  min-height: 0;
  width: min(440px, 100%);
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  background: rgba(14, 12, 9, .60);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.hero__inst-row { display: flex; align-items: stretch; }
.hero__inst .gauge { padding: 12px 12px; flex: 0 0 auto; border-right: 1px solid var(--line); }
.hero__inst .gauge__svg { width: 92px; }
.hero__inst .gauge__val { font-size: 20px; }
.hero__inst .gauge__cap { font-size: 8px; }
.hero__inst .readout-strip {
  flex: 1; border-top: none; grid-template-columns: 1fr; align-content: center;
}
.hero__inst .readout-strip > div {
  border-right: none; border-bottom: 1px solid var(--line); padding: 7px 12px;
}
.hero__inst .readout-strip > div:last-child { border-bottom: none; }

/* mobile: la foto es vertical y los botones caen sobre la placa (más clara).
   Velo vertical: oscurece arriba (copy) y abajo, deja el módulo visible al medio. */
@media (max-width: 767px) {
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(14, 12, 9, .84) 0%, rgba(14, 12, 9, .54) 44%, rgba(14, 12, 9, .30) 64%,
        rgba(14, 12, 9, .68) 100%);
  }
}
@media (max-width: 420px) {
  .hero__inst-row { flex-direction: column; }
  .hero__inst .gauge { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   HOME = una sola pantalla · selector de 3 marcas (cards expansibles)
   Interacción 100% CSS (hover + :focus-within). El azul MD queda contenido
   dentro de la card 03 (--_acc por marca). Fallback no-JS = idéntico.
   ========================================================================== */
.mux-sect { background: var(--bg); }

.mux-wrap {
  /* -1px por el borde inferior del header sticky (64px + 1px) */
  min-height: calc(100vh - var(--hdr) - 1px);
  min-height: calc(100svh - var(--hdr) - 1px);
  display: flex; flex-direction: column;
  gap: clamp(14px, 2.2vh, 28px);
  padding-top: clamp(18px, 3vh, 38px);
  padding-bottom: clamp(12px, 1.8vh, 20px);
}

/* --- fila intro --- */
.mux-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.mux-head__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-7);
}
.mux-head__title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(20px, 2.2vw, 34px); line-height: 1.04; letter-spacing: -.01em;
  text-transform: uppercase; text-align: right; color: var(--fg-hi); margin: 0;
}

/* --- selector --- */
.mux {
  flex: 1 1 auto; display: flex; min-height: min(62vh, 560px);
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line-mid);
  border-bottom: 1px solid var(--line-hair);
}
.mux__item {
  flex: 1 1 0; min-width: 0; display: flex;
  transition: flex-grow .6s cubic-bezier(.22, .61, .36, 1);
}
.mux__item + .mux__item { border-left: 1px solid var(--line); }

/* estado por defecto: Electrónica (primera) expandida */
.mux__item:first-child { flex-grow: 2.5; }
/* al entrar al bloque, todas se comprimen... */
.mux:hover .mux__item,
.mux:focus-within .mux__item { flex-grow: 1; }
/* ...menos la que tiene cursor/foco (especificidad > que la de compresión) */
.mux:hover .mux__item:hover,
.mux:focus-within .mux__item:focus-within { flex-grow: 2.5; }

/* --- card --- */
.mux__card--ele, .mux__card--rep { --_acc: var(--yellow); }
.mux__card--md { --_acc: var(--md-blue); }

.mux__card {
  position: relative; overflow: hidden;
  flex: 1 1 auto; width: 100%; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.9vw, 32px) clamp(16px, 1.7vw, 30px);
  text-decoration: none; color: var(--fg); background: var(--bg);
  transition: background .5s ease;
}
.mux__item:hover .mux__card,
.mux__item:focus-within .mux__card { background: var(--bg-hover); }

/* glow celeste contenido SOLO en la card MD */
.mux__card--md::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(130% 100% at 50% 100%, rgba(0, 149, 219, .18), transparent 72%);
  opacity: .5; pointer-events: none; transition: opacity .5s ease;
}
.mux__item:hover .mux__card--md::after,
.mux__item:focus-within .mux__card--md::after { opacity: 1; }

/* barra de acento superior en la card activa */
.mux__card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--_acc); transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.mux__item:first-child .mux__card::before { transform: scaleX(1); }
.mux:hover .mux__card::before,
.mux:focus-within .mux__card::before { transform: scaleX(0); }
.mux__item:hover .mux__card::before,
.mux__item:focus-within .mux__card::before { transform: scaleX(1); }

.mux__top { min-height: 1.2em; }
.mux__tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  color: var(--fg-6); white-space: nowrap;
}

.mux__logo {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(18px, 3vw, 46px) 0;
}
.mux__logo img {
  display: block; width: auto; height: auto;
  max-width: min(100%, 440px); max-height: clamp(60px, 12vh, 124px);
  object-fit: contain;
  transition: max-height .6s cubic-bezier(.22, .61, .36, 1);
}
/* al posarse en MDREPRO, su logo se agranda aún más que el resto */
.mux__item:hover .mux__card--md .mux__logo img,
.mux__item:focus-within .mux__card--md .mux__logo img { max-height: clamp(104px, 17vh, 182px); }

/* Repuestos usa un lockup apilado (INYESOFT + "Repuestos" manuscrita debajo):
   su wordmark ocupa el 33,96% del alto del archivo contra el 48,34% del de
   Electrónica. A igual ancho los wordmarks coinciden, pero al expandirse la
   tarjeta manda el max-height y el de Repuestos quedaba 28% más chico.
   Se compensa con 48,34/33,96 = 1,4235 sobre el clamp base. */
.mux__card--rep .mux__logo img { max-height: clamp(85px, 17.1vh, 177px); }

.mux__foot { margin-top: auto; }
.mux__title {
  display: block; font-family: var(--sans); font-weight: 800;
  font-size: clamp(17px, 1.5vw, 26px); line-height: 1.06; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--fg-hi);
}
.mux__reveal {
  display: block; margin-top: 12px; max-width: 34ch;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease .04s, transform .5s cubic-bezier(.22, .61, .36, 1) .04s;
}
.mux__item:first-child .mux__reveal { opacity: 1; transform: none; }
.mux:hover .mux__reveal,
.mux:focus-within .mux__reveal { opacity: 0; transform: translateY(8px); }
.mux__item:hover .mux__reveal,
.mux__item:focus-within .mux__reveal { opacity: 1; transform: none; }

.mux__desc { display: block; font-size: 14px; line-height: 1.5; color: var(--fg-4); }
.mux__cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--_acc);
}
.mux__arrow { transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.mux__item:hover .mux__arrow,
.mux__item:focus-within .mux__arrow { transform: translateX(3px); }

.mux__card:focus-visible { outline: 2px solid var(--_acc); outline-offset: -5px; }

/* --- strip inferior --- */
.mux-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 20px; flex-wrap: wrap; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-7);
}
.mux-strip__live { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-6); }
.mux-strip__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 3px var(--yellow-wash), 0 0 10px var(--glow);
}
.mux-strip__end { color: var(--fg-6); }
@media (min-width: 861px) { .mux-strip { padding-right: 76px; } } /* despeja el WA flotante */

/* --- mobile: sin hover, todo apilado y visible --- */
@media (max-width: 860px) {
  .mux-wrap { min-height: 0; gap: 18px; }
  .mux-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mux-head__title { text-align: left; font-size: clamp(22px, 7vw, 30px); }

  .mux { flex-direction: column; min-height: 0; border: none; }
  .mux__item { flex: 0 0 auto; }
  .mux__item:first-child { flex-grow: 0; }
  .mux__item + .mux__item { border-left: none; border-top: 1px solid var(--line); }

  .mux__card { flex-direction: column; padding: 22px 2px; background: var(--bg) !important; }
  .mux__card--md::after { height: 100%; opacity: .5; }
  .mux__logo { justify-content: flex-start; padding: 12px 0; }
  .mux__logo img { max-width: 62%; max-height: 52px; }
  /* mismo factor 1,4235 del lockup apilado de Repuestos */
  .mux__card--rep .mux__logo img { max-height: 74px; }
  .mux__reveal { opacity: 1 !important; transform: none !important; max-width: none; }

  /* acento: tick corto a la izquierda, siempre visible */
  .mux__card::before { transform: scaleX(1) !important; right: auto; width: 44px; }
  .mux-strip { justify-content: flex-start; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mux__item, .mux__card, .mux__card::before, .mux__card--md::after,
  .mux__reveal, .mux__arrow { transition: none; }
}