/* DF GAMING. Ver DESIGN.md: es la fuente de verdad de todo lo que sigue. */
  :root {
    color-scheme: dark;
    --bg: #0b0d0c; --surface: #141816; --surface-2: #202522; --surface-3: #29302c;
    --ink: #f2f4f0; --ink-2: #cdd2ce; --muted: #929a94;
    --line: #202522; --line-2: #343b37; --foto: #f2f4f0;
    /* Papel: la ficha y el presupuesto se imprimen. Redefine los tokens adentro del bloque. */
    --papel: #f2f4f0; --papel-ink: #0b0d0c; --papel-line: #d7dbd7;
    --accent: #8dc63f; --accent-hover: #a8e052; --accent-ink: #0b0d0c; --accent-soft: #1c2913; --accent-line: #587b2c; --accent-text: var(--accent);
    --ok: #8fe0a9; --ok-bg: #15271c; --warn: #f0c060; --warn-bg: #31260f; --bad: #ff9a90; --bad-bg: #371b19; --unk: #a9b0aa; --unk-bg: #1f2321;
    --line-hover: #59615c; --placeholder: #8a928c; --backdrop: rgb(5 7 6 / .76);
    /* Borde de los campos: 3:1 contra la superficie (WCAG 1.4.11). --line-2 daba 1,6:1. */
    --campo: #6b736d;
    --s2: #e4e7e3; --s3: #b2b9b3; --s4: #8a918b; --s5: #666e68; --s6: #4d544e; --s7: #3b423c; --s8: #2e332f; /* reparto: de la pieza mas cara a la mas barata */
    --r-sm: 3px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-foto: 6px; --chaflan: 14px;
    --float: 0 24px 60px -12px rgb(0 0 0 / .6), 0 2px 8px rgb(0 0 0 / .35);
    /* Paneles: una superficie apenas más clara que el fondo, borde tenue y un
       brillo de 1px arriba, como el canto de una chapa. */
    --card: #111513; --card-line: rgb(255 255 255 / .07); --hi: inset 0 1px 0 rgb(255 255 255 / .045);
    --grid-line: rgb(255 255 255 / .035);
    /* Anillo de foco de los campos y borde de lo elegido: nítidos, sin resplandor. */
    --glow: 0 0 0 3px var(--accent-soft); --sel: inset 0 0 0 1px var(--accent-text);
    --sombra-foto: 0 6px 18px rgb(11 13 12 / .5);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --z: 1; --alto: calc(100dvh / var(--z));
    --top-h: 64px; --ancho: 2400px; --medida: 1400px; --borde: clamp(16px, 3vw, 48px);
  }
  /* Tema claro (opcional, se elige en el encabezado). El lima queda para rellenos; el texto y los bordes usan un verde oliva que se lee sobre blanco. */
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f2f4f0; --surface: #ffffff; --surface-2: #e7ebe7; --surface-3: #d9ded9;
    --ink: #0b0d0c; --ink-2: #343a36; --muted: #606862;
    --line: #d9ddd9; --line-2: #bcc3bd; --foto: #eef1ed;
    --papel: #ffffff; --papel-ink: #0b0d0c; --papel-line: #d9ddd9;
    --accent: #8dc63f; --accent-hover: #7cb532; --accent-soft: #edf6df; --accent-line: #86ad4e; --accent-text: #3d650b;
    --ok: #17753a; --ok-bg: #e2f4e8; --warn: #8a5800; --warn-bg: #fcf0d6; --bad: #b3261e; --bad-bg: #fce8e6; --unk: #575e58; --unk-bg: #eaeeea;
    --line-hover: #98a099; --placeholder: #6b736d; --backdrop: rgb(11 13 12 / .5);
    --campo: #8a918b;
    --s2: #2a312c; --s3: #4e564f; --s4: #727a73; --s5: #959d96; --s6: #b3bab4; --s7: #ccd1cc; --s8: #dfe3df;
    --float: 0 16px 48px rgb(11 13 12 / .14), 0 2px 8px rgb(11 13 12 / .08);
    --sombra-foto: 0 6px 18px rgb(11 13 12 / .16);
    --card: #ffffff; --card-line: rgb(11 13 12 / .09); --hi: inset 0 1px 0 rgb(255 255 255 / .9);
    --grid-line: rgb(11 13 12 / .05);
    --glow: 0 0 0 3px var(--accent-soft);
  }
  :root[data-theme="light"] .foto { outline: 1px solid var(--line); outline-offset: -1px; }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); scrollbar-color: var(--line-2) var(--bg); }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.55 "Space Grotesk Variable", "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "ss01"; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
  button, a, summary, label, input, select, textarea { touch-action: manipulation; }
  a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); transition: color .15s, text-decoration-color .15s; }
  a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: var(--r-sm); }
  h1:focus, h2:focus { outline: none; } /* reciben foco por programa, no son interactivos */
  /* Datos y especificaciones usan la segunda familia de la marca. */
  .num, .price, .monto, td.num, .precio strong, .prod-precio strong, .ticket-total strong, .estado b {
    font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  }
  h1, h2, h3 { text-wrap: balance; }
  h1 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 12px; font-weight: 700; }
  h2 { font-size: clamp(21px, 1.6vw, 26px); line-height: 1.25; letter-spacing: -0.022em; margin: 48px 0 16px; font-weight: 700; }
  h2 small, h3 small { font-weight: 400; color: var(--muted); font-size: 13.5px; letter-spacing: 0; margin-left: 8px; }
  /* Los títulos internos conservan el verde de la selección de texto, incluso
     sin seleccionarlos. El título editorial del inicio queda sin fondo. */
  #contenido > section:not(#tab-inicio) h1:not(.visually-hidden),
  #tab-armar .paso > h2, #tab-upgrade .paso > h2 {
    width: fit-content; max-width: 100%; padding: 2px .08em;
    background: var(--accent); color: var(--accent-ink);
  }
  #tab-armar .paso > h2 small, #tab-upgrade .paso > h2 small { color: var(--accent-ink); }
  .lead { color: var(--ink-2); margin: 0; max-width: 58ch; font-size: 16.5px; line-height: 1.55; }
  .hint { font-size: 14px; color: var(--muted); }
  .muted { color: var(--muted); }
  /* Rótulo de dato: el tipo de pieza, la fecha, la tienda. Caja normal y la
     letra de la interfaz: el tamaño y el color lo separan del valor. Antes era
     mono en mayúsculas espaciadas: el rótulo de plantilla por excelencia. */
  .rotulo { display: inline-block; font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  /* Precio de góndola: cifras grandes en la letra de la marca, el "$" chico y
     arriba, como en el cartel de una casa de computación. */
  .p { font-family: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
  .p > small { font-size: .52em; font-weight: 600; vertical-align: .72em; margin-right: .08em; letter-spacing: 0; }
  .antes { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .saltar { position: absolute; left: 16px; top: -48px; z-index: 30; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--r-md); font-weight: 700; text-decoration: none; }
  .saltar:focus { top: 12px; }
  /* Sobre fondo lima el texto va en tinta: "a:hover" lo pintaba de lima y desaparecía. */
  .saltar:hover, .saltar:focus { color: var(--accent-ink); }

  /* Encabezado: logo y navegacion de texto; la pestaña activa lleva una barra lima pegada al borde */
  .top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); view-transition-name: encabezado; }
  /* En el celular el encabezado ocupa un cuarto de la pantalla: al bajar se esconde y al subir vuelve. */
  @media (max-width: 720px) { .top { transition: transform .25s var(--ease); } .top.oculto { transform: translateY(-100%); } }
  .top-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--borde); height: var(--top-h); display: flex; align-items: stretch; gap: 24px; }
  /* Estado del catálogo: cuántos productos y de cuándo es cada precio. Una sola
     línea en cualquier pantalla: con cada tienda a la vista si entra (≥1280px)
     y, si no, el rango de antigüedades que se abre para ver tienda por tienda. */
  .estado { max-width: var(--ancho); margin: 0 auto; padding: 8px var(--borde) 9px; display: none; align-items: center; gap: 6px 20px; font-size: 13px; color: var(--muted); min-height: 38px; position: relative; }
  body:has(#tab-catalogo:not([hidden])) .estado { display: flex; }
  .estado b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .estado .pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
  .estado-total { white-space: nowrap; margin-left: -12px; }
  .tiendas-linea { display: flex; align-items: center; gap: 16px; padding-left: 20px; border-left: 1px solid var(--line); min-width: 0; }
  .rotulo-estado { white-space: nowrap; }
  .estado .tienda-frescura { white-space: nowrap; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
  .estado .tienda-frescura i { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
  /* El punto dice el estado del precio de esa tienda: lima si es de hoy,
     apagado si es de ayer, ámbar si pasó el día y medio, y late mientras la
     estamos leyendo. Sale del mismo dato que el texto: no decora. */
  .estado .tienda-frescura::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-hover); flex: none; }
  .estado .tienda-frescura.fresca::before, .estado .tienda-frescura.leyendo::before { background: var(--accent); }
  .estado .tienda-frescura.atrasada::before { background: var(--warn); }
  .estado .tienda-frescura.atrasada, .estado .tienda-frescura.atrasada i, .estado .atrasada { color: var(--warn); }
  .estado .tienda-frescura.leyendo::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); animation: latido 1.8s var(--ease) infinite; }
  .estado .tienda-frescura.leyendo i { color: var(--accent-text); }
  @keyframes latido { 50% { opacity: .3; } }
  @media (prefers-reduced-motion: reduce) { .estado .tienda-frescura.leyendo::before { animation: none; } }
  .tiendas-plegado { display: none; border: 0 !important; background: none; }
  .tiendas-plegado > summary { padding: 4px 22px 4px 0; color: var(--ink-2); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .tiendas-plegado > summary:hover { background: none; color: var(--ink); }
  .tiendas-plegado > summary::after { right: 4px; top: 9px; width: 6px; height: 6px; }
  .tiendas-plegado > ul { z-index: 12; position: absolute; left: var(--borde); right: var(--borde); top: 100%; margin: 0; padding: 12px 16px 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--float); display: grid; gap: 8px; max-width: 420px; }
  .tiendas-plegado li.nota { display: block; font-size: 12.5px; color: var(--muted); padding: 4px 0 8px; border-top: 1px solid var(--line); margin-top: 4px; }
  .tiendas-plegado li { display: grid; grid-template-columns: 110px 1fr 84px; align-items: center; gap: 12px; font-size: 13.5px; }
  .tiendas-plegado li i { text-align: right; }
  .edad { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
  .edad i { display: block; height: 100%; background: var(--line-hover); border-radius: 3px; }
  .fresca .edad i, .leyendo .edad i { background: var(--accent); }
  .atrasada .edad i { background: var(--warn); }
  @media (max-width: 1279px) { .tiendas-linea { display: none; } .tiendas-plegado { display: block; } }
  @media (max-width: 720px) { .estado { padding: 4px 16px 6px; gap: 2px 12px; font-size: 12.5px; flex-wrap: wrap; } .estado-total { white-space: normal; margin-left: -4px; } .tiendas-plegado > ul { left: 12px; right: 12px; max-width: none; } }
  .brand { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; }
  .brand:hover { color: inherit; }
  .brand .logo { display: block; height: 28px; width: auto; }
  .logo-claro, :root[data-theme="light"] .logo-oscuro { display: none !important; }
  :root[data-theme="light"] .logo-claro { display: block !important; }
  .tema { align-self: center; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--card-line); border-radius: var(--r-md); background: var(--card); box-shadow: var(--hi); color: var(--ink-2); cursor: pointer; font-size: 18px; transition: color .15s, border-color .15s, transform .12s var(--ease); }
  .tema:hover { color: var(--ink); border-color: var(--line-hover); }
  .tema:active { transform: scale(.95); }
  .brand span { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabs { display: flex; gap: 2px; margin-right: auto; }
  .tabs a { display: flex; align-items: center; text-decoration: none; position: relative; isolation: isolate; border: 0; background: none; color: var(--muted); font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1; padding: 0 14px; cursor: pointer; white-space: nowrap; transition: color .15s; }
  /* Fondo de la pestaña: aparece al pasar y queda en la actual. */
  .tabs a::before { content: ""; position: absolute; z-index: -1; inset: 13px 2px; border-radius: var(--r-md); background: transparent; transition: background-color .18s var(--ease); }
  .tabs a:hover { color: var(--ink); }
  .tabs a:hover::before { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .tabs a[aria-current="page"]::before { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .tabs a[aria-current="page"] { color: var(--ink); }
  .tabs a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; }
  .tabs a[aria-current="page"]::after { background: var(--accent); }
  .listo .tabs a { text-decoration: none; transition: color .15s; }
  .tabs a:focus-visible { outline-offset: -4px; }
  @media (max-width: 720px) {
    .top-in { height: auto; flex-wrap: wrap; padding: 12px 16px 0; gap: 4px 12px; }
    /* El logo a la izquierda y los botones contra el borde derecho. */
    .brand { padding-bottom: 4px; margin-right: auto; }
    .brand span { display: none; }
    /* Las seis secciones entran en el ancho: se reparten el espacio en vez de
       desplazarse (antes "Guía" quedaba fuera de la pantalla, sin aviso). */
    .tabs { width: 100%; margin: 0; order: 3; overflow-x: auto; scrollbar-width: none; }
    .tabs a::after { top: auto; bottom: 0; }
    .tabs::-webkit-scrollbar { display: none; }
    .tema { width: 44px; height: 44px; margin-bottom: 4px; }
    .tabs a { flex: 1 1 auto; justify-content: center; padding: 12px 3px 13px; font-size: clamp(13px, 3.7vw, 14px); }
    .tabs a::before { inset: 6px 1px; }
    .tabs a::after { left: 4px; right: 4px; }
  }
  /* En los celulares más chicos, "Inicio" lo hace el logo. */
  @media (max-width: 359px) { #t-inicio { display: none; } }

  main { max-width: var(--ancho); margin: 0 auto; padding: 32px var(--borde) 96px; }

  /* En un monitor grande no crece solo el texto: crece la pagina entera
     (tipografia, cajas, fotos, tablas, espacios), como si el navegador
     estuviera un poco mas cerca. Debajo de 1700px no se toca nada. */
  @media (min-width: 1700px) { :root { zoom: 1.08; --z: 1.08; } }
  @media (min-width: 2100px) { :root { zoom: 1.18; --z: 1.18; } }
  @media (min-width: 2600px) { :root { zoom: 1.3; --z: 1.3; } }
  @media (max-width: 720px) { main { padding: 24px 16px 104px; } }

  /* Controles */
  /* Una sección, no una caja: la separa una línea, no un contorno. */
  .panel { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0 0; }
  .fields { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
  input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--campo); border-radius: var(--r-md); padding: 12px 14px; min-height: 50px; width: 100%; box-shadow: var(--hi); transition: border-color .15s, box-shadow .15s; }
  input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
  input::placeholder, textarea::placeholder { color: var(--placeholder); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent-text); box-shadow: var(--glow); }
  select { background-color: var(--surface); color: var(--ink); }
  .actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

  /* Boton principal: lima con el chaflan del logo (gradiente, no clip-path, para no recortar el foco) */
  .btn { --c: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: var(--r-sm) var(--r-sm) 0 var(--r-sm); padding: 10px 22px 10px 18px; font-family: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.2; cursor: pointer; color: var(--accent-ink); background: linear-gradient(315deg, transparent calc(var(--chaflan) * .7), var(--c) 0); white-space: nowrap; text-decoration: none; transition: transform .12s var(--ease); }
  .btn:hover { --c: var(--accent-hover); color: var(--accent-ink); }
  .btn:active { transform: scale(.98); }
  .btn:disabled, .btn[aria-busy="true"] { opacity: .6; cursor: progress; transform: none; }
  .btn.grande { min-height: 48px; padding: 12px 28px 12px 22px; font-size: 16px; }
  .btn .ico { font-size: 16px; }
  .btn.sec { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 9px 16px; font-weight: 500; box-shadow: var(--hi); transition: background-color .15s, border-color .15s, transform .12s var(--ease); }
  .btn.sec:hover { background: var(--surface-2); border-color: var(--line-hover); }
  /* En pantallas angostas un botón largo parte la línea en vez de salirse de la pantalla. */
  @media (max-width: 480px) { .btn { white-space: normal; max-width: 100%; text-align: left; } }
  .link-accion { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); text-decoration: none; }
  .link-accion .ico { color: var(--muted); transition: transform .15s var(--ease), color .15s; }
  .link-accion:hover .ico { color: var(--accent-text); transform: translateX(3px); }
  .err { font-size: 13px; font-weight: 500; color: var(--bad); }
  input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }

  /* Estados y tablas */
  .spec { display: inline-block; font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-sm); padding: 1px 7px; margin: 4px 4px 0 0; }
  .spec.ia { background: var(--unk-bg); color: var(--ink); border: 1px dashed var(--line-2); } /* interpretado por IA: aviso, no seleccion */
  .badge { display: inline-block; font-size: 11.5px; font-weight: 500; border-radius: var(--r-sm); padding: 1px 7px; margin-right: 8px; white-space: nowrap; }
  .compatible { background: var(--ok-bg); color: var(--ok); }
  .revisar { background: var(--warn-bg); color: var(--warn); }
  .incompatible { background: var(--bad-bg); color: var(--bad); }
  .no_verificable { background: var(--unk-bg); color: var(--unk); }
  .note { font-size: 13.5px; margin: 8px 0; color: var(--ink-2); display: flex; align-items: baseline; }
  .aviso { font-size: 13.5px; color: var(--warn); background: var(--warn-bg); border-radius: var(--r-md); padding: 10px 14px; margin: 12px 0; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  caption { text-align: left; padding: 0 0 8px; color: var(--muted); font-size: 12.5px; }
  td, th { text-align: left; padding: 11px 10px; vertical-align: top; }
  tbody tr + tr td { border-top: 1px solid var(--line); }
  th { font-size: 12.5px; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); }
  td.num { text-align: right; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
  td.cat { font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--muted); white-space: nowrap; width: 1%; padding-left: 0; }
  td a { overflow-wrap: anywhere; font-weight: 500; }
  .cuotas { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .cuotas.si { color: var(--ok); }
  .tarjeta { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
  .scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .empty { color: var(--muted); padding: 20px 0; }
  .error-box { background: var(--bad-bg); color: var(--ink); border-radius: var(--r-md); padding: 14px 18px; margin-top: 24px; }
  .error-box strong { color: var(--bad); display: block; margin-bottom: 2px; }

  /* Desplegables: fila con flecha que gira; cerrada muestra lo necesario para decidir si abrirla */
  details { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
  details:last-of-type { border-bottom: 1px solid var(--line); }
  details > summary:hover { background: var(--surface); }
  summary { cursor: pointer; padding: 14px 44px 14px 18px; list-style: none; display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; align-items: baseline; position: relative; border-radius: inherit; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: ""; position: absolute; right: 20px; top: 21px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .18s var(--ease), border-color .15s; }
  summary:hover::after { border-color: var(--ink); }
  details[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
  summary > span:first-child { flex: 1; min-width: 0; }
  summary .price { font-weight: 700; font-variant-numeric: tabular-nums; }
  details .body { padding: 2px 18px 18px; border-top: 1px solid var(--line); }
  details .body > :first-child { margin-top: 14px; }
  .resumen-piezas { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

  /* Listas largas dentro de un desplegable: filas, no tarjetas apiladas */
  .todos > .body > details, .grupo > .body > details, .gamas > .body > details { background: none; border: 0; border-radius: 0; margin: 0; border-top: 1px solid var(--line); }
  .todos > .body > details:first-child, .grupo > .body > details:first-child, .gamas > .body > details:first-child { border-top: 0; }
  .todos > .body > details > summary, .grupo > .body > details > summary, .gamas > .body > details > summary { padding-left: 0; }
  .todos > .body > details > .body, .grupo > .body > details > .body, .gamas > .body > details > .body { padding-left: 0; padding-right: 0; }
  .todos > .body > .grupo { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; }
  .todos > .body > .grupo:first-child { border-top: 0; }
  .todos > .body > .grupo > summary { padding-left: 0; }
  .todos > .body > .grupo > .body { padding: 0 0 8px 16px; border: 0; border-left: 1px solid var(--line-2); }
  .todos, .gamas { margin-top: 10px; }
  .glosario { font-size: 14px; }
  .glosario dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 4px 0 0; }
  .glosario dt { font-weight: 700; }
  .glosario dd { margin: 0; color: var(--ink-2); }
  @media (max-width: 560px) { .glosario dl { grid-template-columns: 1fr; gap: 2px; } .glosario dd { margin-bottom: 8px; } }
  .razones ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }
  .razones li + li { margin-top: 4px; }

  .detalle-sec { margin-top: 16px; font-size: 13.5px; }
  .detalle-sec > summary { padding-left: 0; }
  .detalle-sec > .body { padding-left: 0; padding-right: 0; }
  .detalle-sec .estado-resumen { color: var(--muted); font-weight: 400; margin-left: 6px; }
  .alt { display: grid; gap: 0; }
  .alt-grupo { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
  .alt-grupo:first-child { border-top: 0; }
  .alt-grupo > strong { font-size: 12.5px; color: var(--muted); }
  .alt .row { display: grid; gap: 6px; }
  .alt .t { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .alt .t.sel { font-weight: 600; }
  .alt .t.over { opacity: .55; }
  @media (max-width: 560px) { .alt-grupo { grid-template-columns: 1fr; gap: 4px; } }

  /* Carga: la forma de lo que viene, con el texto de que esta pasando */
  .skeleton { display: grid; gap: 8px; margin-top: 32px; }
  .skeleton p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }
  .skeleton i { display: block; height: 64px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: brillo 1.4s ease-in-out infinite; }
  @keyframes brillo { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* Inicio: arranque a la izquierda, ficha real de hoy a la derecha */
  .inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1600px; gap: clamp(32px, 4vw, 72px); align-items: start; padding-top: clamp(8px, 4vh, 48px); }
  /* Detrás del inicio, la grilla del plano (la misma del diagrama de la guía): el mostrador es
     una mesa de dibujo. Se desvanece antes de las secciones de datos. */
  #tab-inicio { position: relative; isolation: isolate; }
  #tab-inicio::before { content: ""; position: absolute; z-index: -1; left: calc(var(--borde) * -1); right: calc(var(--borde) * -1); top: -32px; height: min(860px, 105vh); pointer-events: none; }
  #tab-inicio::before { background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 60% 25%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 60% 25%, #000 30%, transparent 75%); }
  .inicio h1 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -0.038em; font-weight: 650; margin: 0 0 20px; max-width: 20ch; }
  .inicio h1 em { font-style: normal; display: block; }
  .inicio .lead { margin-bottom: 28px; }
  .arranque { display: grid; gap: 20px; }
  .arranque fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .arranque legend { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 0; margin-bottom: 10px; }
  .arranque fieldset + fieldset { margin-top: 4px; }
  .usos-rapidos { display: flex; flex-wrap: wrap; gap: 8px; }
  .otros-caminos { margin: 36px 0 0; padding: 20px 0 0; border-top: 1px solid var(--card-line); display: grid; gap: 12px; list-style: none; }
  .otros-caminos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--muted); font-size: 14px; }
  @media (max-width: 960px) { .inicio { grid-template-columns: 1fr; gap: 40px; } }
  @media (max-width: 560px) { .inicio { padding-top: 0; } .arranque .actions .btn { width: 100%; } }
  /* Blancos tactiles de 44px en pantallas tactiles */
  @media (max-width: 720px) { .montos button, .chip { min-height: 44px; } .prod .comparar-con { padding: 12px 0; } .tiendas-plegado > summary { padding-block: 10px; } .tiendas-plegado > summary::after { top: 15px; } .link-accion { padding: 11px 0; } .otros-caminos { gap: 0; } .seguir { padding: 8px 0; } .tend a { display: inline-block; padding: 6px 0; } }

  /* La ficha: el presupuesto impreso en papel. Firma de la marca (chaflán del
     logo). Cada renglón lleva debajo una barra con la parte del total que se
     lleva esa pieza: un ticket que además muestra en qué se va la plata. */
  /* La impresora del mostrador: el ticket sale de la ranura cada vez que se reimprime (al
     cargar y cada vez que se elige otro uso o monto). Es el único movimiento del inicio que no
     pide nadie, y responde a lo que se eligió. La sombra va en el envoltorio: el chaflán
     recorta un box-shadow. El clip deja ver la sombra a los lados y abajo, y esconde el papel
     mientras todavía está adentro de la ranura. */
  .ticket-sombra { position: relative; padding-top: 14px; clip-path: inset(0 -60px -90px -60px); filter: drop-shadow(0 22px 34px rgb(0 0 0 / .45)) drop-shadow(0 2px 3px rgb(0 0 0 / .3)); }
  /* El cabezal: una pieza de chapa más ancha que el papel, con la ranura en el borde de abajo. */
  .ticket-sombra::before { content: ""; position: absolute; z-index: 2; top: 0; left: -12px; right: -12px; height: 14px; border-radius: var(--r-md) var(--r-md) 2px 2px; background: linear-gradient(#232926, #171b19); border: 1px solid #333a36; border-bottom-color: #050606; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 -3px 0 #050606; }
  /* Su luz de estado: quieta cuando el ticket está impreso, titila mientras imprime. */
  .ticket-sombra::after { content: ""; position: absolute; z-index: 3; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
  .ticket-sombra:has(> .cargando, > .actualizando)::after { animation: latido .7s steps(2, jump-none) infinite; }
  :root[data-theme="light"] .ticket-sombra { filter: drop-shadow(0 20px 32px rgb(11 13 12 / .14)) drop-shadow(0 1px 3px rgb(11 13 12 / .1)); }
  :root[data-theme="light"] .ticket-sombra::before { background: linear-gradient(#3a413d, #262b28); border-color: #1b1f1d; }
  .ticket-sombra > .ticket { position: relative; z-index: 1; }
  .ticket.imprime { animation: imprimir .85s cubic-bezier(.25, .8, .25, 1) both; }
  @keyframes imprimir { from { transform: translateY(-100%); } }
  .ticket { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%); padding: 22px clamp(18px, 2vw, 28px) 20px; border-top: 4px solid var(--accent); }
  .ticket-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
  .ticket-cab b { font-size: 16px; }
  .ticket-cab span { font-size: 12.5px; color: var(--muted); }
  .ticket-fila { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 10px 0 9px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .ticket-fila > .foto { grid-row: 1 / span 2; width: 48px; height: 48px; mix-blend-mode: multiply; background: transparent; }
  .ticket-fila .rotulo { display: block; font-size: 12px; }
  .ticket-fila .nom { min-width: 0; font-weight: 500; line-height: 1.3; }
  .ticket-fila .nom a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
  .ticket-fila .nom a:hover { text-decoration: underline; }
  .ticket-fila .nom small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 1px; }
  .ticket-fila .num { font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; align-self: start; padding-top: 16px; }
  .ticket-fila .num small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); }
  .ticket-fila > .parte { grid-column: 2 / -1; margin-top: 7px; }
  .parte { display: block; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
  .parte i { display: block; height: 100%; background: var(--s3, #8a918b); border-radius: 2px; }
  .papel .parte i { background: #4d544e; }
  .ticket-fila.mayor .parte i, .ticket-uso .parte i { background: var(--accent); }
  .ticket-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 6px; }
  .ticket-total > span:first-child { color: var(--muted); font-size: 13.5px; }
  .ticket-total .p { font-size: clamp(32px, 2.4vw, 40px); }
  .ticket-uso { display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 2px 0 4px; }
  .ticket-uso .parte { height: 8px; }
  .ticket-pie { font-size: 13.5px; margin: 12px 0 0; }
  .ticket-pie a { color: var(--ink); font-weight: 500; }
  /* Las barras crecen cuando llegan los datos: se ve de dónde sale cada parte. */
  .ticket .parte i, .vs-fila .pista i, .uso .parte i, .cambios .cb i { animation: crecer .7s var(--ease) both; }
  .ticket-fila:nth-child(3) .parte i { animation-delay: .04s; } .ticket-fila:nth-child(4) .parte i { animation-delay: .08s; } .ticket-fila:nth-child(5) .parte i { animation-delay: .12s; } .ticket-fila:nth-child(6) .parte i { animation-delay: .16s; } .ticket-fila:nth-child(7) .parte i { animation-delay: .2s; } .ticket-fila:nth-child(8) .parte i { animation-delay: .24s; }
  @keyframes crecer { from { width: 0; } }
  /* Mientras se reimprime con lo nuevo, lo anterior queda atenuado. */
  .ticket.actualizando:not(.cargando) { opacity: .55; transition: opacity .2s; }
  .ticket-vacio { margin: 16px 0 8px; color: var(--ink-2); }
  .ticket.cargando .ticket-fila { color: transparent; height: 69px; }
  .ticket.cargando .ticket-fila::after { content: ""; grid-column: 1 / -1; height: 12px; border-radius: 3px; background: var(--surface-2); }
  @media (max-width: 480px) { .ticket-fila { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 10px; } .ticket-fila > .foto { width: 40px; height: 40px; } }

  .cabeza { margin: 0 0 28px; max-width: 640px; }

  /* Formulario guiado: pasos sobre una linea vertical, sin cajas */
  .guia { display: grid; }
  .armar-modos { display: flex; gap: 6px; width: fit-content; max-width: 100%; margin: 0 auto 28px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--r-lg); }
  .armar-modos button { border: 0; border-radius: var(--r-md); padding: 10px 16px; background: none; color: var(--ink-2); font: inherit; cursor: pointer; }
  .armar-modos button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .armar-manual { width: 100%; max-width: 1000px; margin: 0 auto; }
  .manual-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--line-2); }
  .manual-cab h2 { margin: 0 0 8px; }
  .manual-cab .hint { margin: 0 0 20px; }
  .manual-cab > strong { font-size: clamp(22px, 3vw, 30px); white-space: nowrap; }
  .manual-fila { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; align-items: center; gap: 10px 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  /* La foto de la góndola: la de la pieza elegida, o una de referencia apagada mientras falta elegir. */
  .manual-img { width: 84px; height: 70px; aspect-ratio: auto; margin: 0; border-radius: var(--r-md); }
  .manual-img .foto { padding: 8%; }
  .manual-fila:not(.elegida) .manual-img { filter: grayscale(1); opacity: .55; }
  .manual-cat { display: block; color: var(--muted); font-size: 13px; margin-bottom: 2px; }
  .manual-pista { font-weight: 500; color: var(--ink-2); }
  .manual-cab .linklike { border: 0; background: none; padding: 0; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .manual-pieza { min-width: 0; }
  .manual-pieza b, .manual-pieza small { display: block; overflow-wrap: anywhere; }
  .manual-pieza small { color: var(--muted); }
  .manual-quitar { border: 0; background: none; color: var(--ink-2); cursor: pointer; font: inherit; }
  .manual-estado { display: grid; gap: 8px; margin: 24px 0; }
  .manual-estado details { margin-top: 8px; }
  .manual-estado li + li { margin-top: 8px; }
  .manual-selector { margin: 32px auto; max-width: 1100px; }
  .manual-selector-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .manual-selector h1 { margin: 0 0 16px; }
  .manual-selector label { display: grid; gap: 6px; }
  .manual-selector input { width: 100%; padding: 11px 14px; border: 1px solid var(--campo); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; }
  .manual-opciones { list-style: none; padding: 0; }
  .manual-opciones li { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .manual-foto { width: 88px; height: 76px; display: grid; place-items: center; background: var(--surface); border-radius: var(--r-md); overflow: hidden; }
  .manual-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .manual-opciones li span { min-width: 0; }
  .manual-opciones b, .manual-opciones small { display: block; }
  .manual-opciones small { color: var(--muted); }
  .manual-opciones .manual-incompatible { color: var(--bad); }
  .manual-opciones .manual-revisar { color: var(--warn); }
  .manual-opciones button:disabled { opacity: .55; cursor: not-allowed; }
  @media (max-width: 600px) {
    .armar-modos { width: 100%; }
    .armar-modos button { flex: 1; padding-inline: 8px; }
    .manual-fila { grid-template-columns: 60px minmax(0, 1fr) auto; }
    .manual-img { width: 60px; height: 52px; }
    .manual-quitar { grid-column: 2; justify-self: start; padding: 0; }
    .manual-cab { align-items: start; }
    .manual-opciones li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
    .manual-foto { width: 64px; height: 64px; }
    .manual-opciones li button { grid-column: 2; justify-self: start; }
  }
  .guia > .paso { position: relative; padding: clamp(22px, 2.6vw, 40px); margin-bottom: 20px; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-xl); box-shadow: var(--hi); }
  .guia > .paso::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: 8px; width: 2px; background: var(--line); }
  .paso > h2 { font-size: 21px; margin: 1px 0 6px; }
  .guia > .paso > h2 { font-size: clamp(23px, 1.55vw, 34px); letter-spacing: -0.015em; margin: 0 0 16px; }
  .guia > .paso > h2 small { font-size: clamp(13.5px, 0.7vw, 16px); }
  /* Todo lo que se toca o se lee dentro del paso crece con la pantalla. */
  .guia .opcion { padding: clamp(13px, 0.85vw, 20px) clamp(42px, 3vw, 54px) clamp(13px, 0.85vw, 20px) clamp(14px, 0.9vw, 20px); }
  .guia .opcion b { font-size: clamp(15px, 0.82vw, 19px); }
  .guia .opcion span { font-size: clamp(13px, 0.62vw, 15.5px); }
  .guia .opcion .ico { font-size: clamp(20px, 1vw, 24px); }
  .guia .fields label { font-size: clamp(13px, 0.62vw, 15.5px); }
  .guia input, .guia select, .guia textarea { font-size: clamp(16px, 0.78vw, 18.5px); min-height: clamp(50px, 3vw, 58px); }
  .guia .montos button { font-size: clamp(15px, 0.78vw, 18px); min-height: clamp(46px, 2.8vw, 54px); padding: 0 clamp(14px, 1vw, 20px); }
  .paso-acciones .btn { font-size: clamp(15px, 0.78vw, 18px); min-height: clamp(48px, 2.9vw, 56px); padding: 12px clamp(22px, 1.6vw, 34px) 12px clamp(18px, 1.3vw, 28px); }
  .abrir-guia, .guia .ayuda summary { font-size: clamp(14px, 0.66vw, 16.5px); }

  .paso > .hint { margin: 0 0 14px; max-width: 62ch; }
  .guia > details.paso { padding: 0; margin: 0 0 24px; }
  .guia > details.paso::before { content: none; }
  .guia > .actions { padding-left: 0; }
  @media (max-width: 560px) {
    .guia > details.paso { margin-left: 0; }
    .guia > .actions .btn { width: 100%; }
  }
  .opciones { display: grid; gap: 8px; grid-template-columns: 1fr; max-width: 760px; }
  .opcion { position: relative; display: grid; grid-template-columns: 22px max-content 1fr; column-gap: 12px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 13px 42px 13px 14px; cursor: pointer; background: var(--card); box-shadow: var(--hi); color: var(--ink); font-weight: 400; transition: border-color .15s, background-color .15s, box-shadow .2s, transform .15s var(--ease); }
  .opcion:hover { border-color: var(--line-hover); }
  .opcion:active { transform: scale(.99); }
  .opcion input { position: absolute; opacity: 0; pointer-events: none; }
  .opcion .ico { font-size: 20px; color: var(--muted); transition: color .15s; }
  @media (max-width: 560px) { .opcion { grid-template-columns: 20px 1fr; } .opcion .ico { grid-row: span 2; } }
  .opcion b { font-size: 15px; font-weight: 500; }
  .opcion span { font-size: 13px; color: var(--muted); line-height: 1.4; }
  .opcion::after { content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 5px; border: 1.5px solid var(--line-2); transition: background-color .15s, border-color .15s; }
  .opcion:has(input:checked) { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent) 7%, var(--card)); box-shadow: var(--sel); }
  .opcion:has(input:checked) .ico { color: var(--accent-text); }
  .opcion:has(input:checked)::after { background: var(--accent); border-color: var(--accent-text); box-shadow: inset 0 0 0 3px var(--accent-soft); }
  .opcion:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  /* La misma opción que en Armar, más compacta: el inicio hace las dos primeras preguntas de Armar en una pantalla. */
  .opciones.compactas { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .opciones.compactas .opcion { grid-template-columns: 20px 1fr; padding: 11px 36px 11px 12px; min-height: 48px; }
  .opciones.compactas .opcion b { font-size: 14px; line-height: 1.25; }
  .opciones.compactas .opcion .ico { grid-row: auto; }
  .opciones.compactas .opcion::after { right: 12px; width: 14px; height: 14px; margin-top: -7px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 8px 13px; min-height: 40px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--card); box-shadow: var(--hi); display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, background-color .15s; }
  .chip { transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease); }
  .chip:hover { border-color: var(--line-hover); background: var(--surface-2); }
  .chip:active { transform: scale(.98); }
  .chip input { position: absolute; opacity: 0; pointer-events: none; }
  .chip .ico { color: var(--muted); font-size: 17px; }
  .chip:has(input:checked) { border-color: var(--accent-text); background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: var(--sel); }
  .chip:has(input:checked) .ico { color: var(--accent-text); }
  .chip:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
  .montos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
  .montos button { font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1; min-height: 46px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--hi); color: var(--ink); border-radius: var(--r-md); padding: 0 14px; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .15s, background-color .15s; }
  .montos button { transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease); }
  .montos button:hover { border-color: var(--line-hover); background: var(--surface-2); }
  .montos button:active { transform: scale(.98); }
  .montos button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); color: var(--ink); font-weight: 600; box-shadow: var(--sel); }
  .presupuesto { max-width: 300px; }
  textarea.pc { min-height: 104px; resize: vertical; }
  .ayuda { font-size: 14px; margin: 10px 0 0; border: 0; background: none; }
  .ayuda:hover, .ayuda[open] { border-color: transparent; }
  .ayuda > summary { padding: 6px 24px 6px 0; color: var(--ink-2); font-weight: 500; justify-content: flex-start; display: inline-flex; gap: 8px; align-items: center; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .ayuda > summary:hover { color: var(--ink); }
  .ayuda > summary .ico { color: var(--muted); }
  .ayuda > summary::after { right: 4px; top: 14px; }
  .ayuda > .body { border: 0; padding: 8px 0 0; }
  .ayuda ol { margin: 6px 0 0; padding-left: 20px; color: var(--ink-2); }
  .fila { display: flex; gap: 8px; }
  .fila:has(.buscador) { position: relative; }
  .buscador { flex: 1; min-width: 0; }
  .contra { margin-top: 18px; display: grid; gap: 16px; }
  .contra-juego { border-top: 1px solid var(--line); padding-top: 12px; }
  .contra-juego h3 { font-size: 15px; margin: 0 0 8px; }
  .req-tabla { display: grid; }
  .req-fila { display: grid; grid-template-columns: 92px minmax(70px, .7fr) minmax(120px, 1fr) 22px; gap: 10px; align-items: center; min-height: 34px; border-top: 1px solid var(--line); }
  .req-fila:first-child { border-top: 0; }
  .req-fila > span:first-child { color: var(--muted); font-size: 12.5px; }
  .req-fila strong { font-size: 13.5px; }
  .req-fila .pide { color: var(--ink-2); font-size: 13px; }
  .req-estado { font-size: 17px; text-align: center; }
  .req-fila.compatible .req-estado { color: var(--ok); }
  .req-fila.revisar .req-estado { color: var(--warn); }
  .req-fila.incompatible .req-estado { color: var(--bad); }
  .ficha-steam { margin-top: 8px; border-bottom: 0; }
  .ficha-steam > summary { padding: 7px 28px 7px 0; color: var(--muted); font-size: 12.5px; justify-content: flex-start; }
  .ficha-steam > summary::after { right: 5px; top: 13px; }
  .ficha-steam > .body { padding: 7px 0 4px; border: 0; color: var(--ink-2); font-size: 12.5px; }
  .ficha-steam p { margin: 4px 0; }
  @media (max-width: 560px) { .req-fila { grid-template-columns: 74px auto minmax(0, 1fr) 18px; gap: 6px; } }
  .preguntar { margin-top: 16px; }
  .destacados summary .k { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin-bottom: 3px; }
  .destacados summary strong { font-size: 18px; }
  .destacados summary .price { font-size: 22px; }
  .destacados summary { padding: 18px 48px 18px 20px; }
  .destacados summary > .foto { width: 64px; height: 64px; flex: none; align-self: center; }
  /* Un armado, cerrado: la bandeja con las fotos de lo que más pesa, qué es y cuánto sale. */
  details.armado { border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--hi); margin: 0 0 12px; transition: border-color .15s, box-shadow .2s; }
  details.armado:last-of-type { border-bottom: 1px solid var(--card-line); }
  details.armado:hover { border-color: var(--line-2); }
  details.armado[open] { border-color: var(--line-2); }
  details.armado > summary:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
  details.armado > .body { border-top-color: var(--card-line); }
  details.armado > summary { flex-wrap: nowrap; align-items: center; gap: 20px; }
  details.armado > summary > .bandeja { display: flex; flex: none; padding-left: 26px; }
  .bandeja .gondola { width: 64px; height: 64px; aspect-ratio: auto; margin: 0 0 0 -26px; border-radius: var(--r-lg); box-shadow: 0 0 0 2px var(--bg), 0 4px 12px rgb(0 0 0 / .25); }
  .bandeja .gondola:nth-child(2) { transform: translateY(6px); } .bandeja .gondola:nth-child(3) { transform: translateY(-4px); }
  .bandeja .foto { padding: 6px; }
  .armado-que { flex: 1; min-width: 0; }
  .armado-cuanto { display: grid; justify-items: end; gap: 6px; flex: none; }
  .armado-cuanto .p { font-size: 24px; }
  .uso { display: grid; justify-items: end; gap: 4px; width: 128px; }
  .uso .parte { width: 100%; height: 5px; }
  .uso .parte i { background: var(--ink-2); }
  .uso small { font-size: 12.5px; color: var(--muted); }
  @media (max-width: 640px) {
    details.armado > summary { flex-wrap: wrap; gap: 12px; }
    .bandeja .gondola { width: 52px; height: 52px; }
    .armado-que { flex-basis: calc(100% - 120px); }
    .armado-cuanto { justify-items: start; flex-basis: 100%; grid-template-columns: auto 1fr; align-items: center; }
    .uso { justify-items: start; width: auto; }
  }
  /* Mapa de compatibilidad: cada verificación entre dos piezas, con su estado. */
  .compat { margin: 20px 0 8px; }
  .compat h3 { font-size: 15px; margin: 0 0 8px; }
  .compat h3 small { display: block; margin: 2px 0 0; font-size: 13px; }
  .compat ul { list-style: none; margin: 0; padding: 0; }
  .compat li { display: grid; grid-template-columns: 76px minmax(150px, 220px) minmax(0, 1fr) max-content; gap: 4px 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
  .compat .par { display: flex; align-items: center; color: var(--ink-2); font-size: 20px; }
  .compat .par i { width: 16px; height: 2px; background: var(--line-2); margin: 0 4px; }
  .compat li b { display: block; font-weight: 500; }
  .compat li small { color: var(--muted); font-size: 12.5px; }
  .compat .motivo { color: var(--ink-2); }
  .compat .estado-c { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12.5px; white-space: nowrap; }
  .compat .c-compatible .estado-c { color: var(--ok); } .compat .c-compatible .par i { background: var(--ok); }
  .compat .c-revisar .estado-c, .compat .c-no_verificable .estado-c { color: var(--warn); } .compat .c-revisar .par i, .compat .c-no_verificable .par i { background: var(--warn); }
  .compat .c-incompatible .estado-c { color: var(--bad); } .compat .c-incompatible .par i { background: var(--bad); }
  @media (max-width: 640px) { .compat li { grid-template-columns: 64px minmax(0, 1fr); } .compat .motivo, .compat .estado-c { grid-column: 2; } }
  .destacados summary { flex-wrap: nowrap; align-items: center; }
  @media (max-width: 560px) { .destacados summary { flex-wrap: wrap; } .destacados summary > .foto { width: 52px; height: 52px; } }

  /* Comparador por pieza: una franja con tres columnas, no tres tarjetas */
  .franja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .franja > div { padding: 20px 24px 20px 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; align-content: start; min-width: 0; }
  .franja > div > .gondola { grid-row: span 4; width: 72px; height: 72px; aspect-ratio: auto; margin: 0; }
  .franja > div > .gondola .foto { padding: 6px; }
  .franja > div > :not(.gondola) { grid-column: 2; }
  .franja .price .p { font-size: 24px; }
  /* Qué cambia contra tu PC: hoy en gris, con esta pieza en tinta, misma escala. */
  .cambios { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .cambios li { display: grid; grid-template-columns: 1fr; gap: 3px; }
  .cambios .cb { display: grid; gap: 2px; }
  .cambios .cb i { display: block; height: 5px; border-radius: 2px; }
  .cambios .cb .hoy { background: var(--surface-3); }
  .cambios .cb .nueva { background: var(--ink-2); }
  .cambios .cv { font-variant-numeric: tabular-nums; }
  .cambios .cv b { color: var(--ink); }
  .cambios li.txt { color: var(--ink-2); }
  .franja > div + div { border-left: 1px solid var(--line); padding-left: 24px; }
  .franja .k { font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .franja a { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
  .franja .price { font-weight: 700; }
  .franja .price > small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
  @media (max-width: 720px) { .franja { grid-template-columns: 1fr; } .franja > div + div { border-left: 0; border-top: 1px solid var(--line); } }
  .cat-titulo { font-size: 19px; margin: 40px 0 12px; }

  /* Juegos: desplegable con imagen (todo el ancho de la fila) */
  .sug-juegos { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--float); padding: 6px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
  .sug-juegos button { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; padding: 7px 8px; border-radius: var(--r-md); cursor: pointer; }
  .sug-juegos button:hover, .sug-juegos button[aria-selected="true"] { background: var(--surface-2); }
  .sug-juegos img { width: 92px; height: 34px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); flex: none; }
  .sug-juegos .vacio { padding: 10px; font-size: 13.5px; color: var(--muted); }
  @media (max-width: 480px) { .sug-juegos img { width: 64px; height: 24px; } }
  .juegos { display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .juego { border-top: 1px solid var(--line); font-size: 13.5px; padding: 0 0 12px; }
  .juego .portada { display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; background: var(--surface-2); border-radius: var(--r-lg); margin-top: 12px; }
  .juego .cuerpo { padding: 12px 0 0; }
  .juego header { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 8px; }
  .juego header b { font-size: 15px; min-width: 0; }
  .juego button { border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: var(--r-sm); }
  .juego button:hover { color: var(--bad); }
  .juego dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
  .juego dt { color: var(--muted); }
  .juego dd { margin: 0; }
  .chips-requisitos { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: 12.5px; }
  .chips-requisitos span { white-space: nowrap; }
  .chips-requisitos b { color: var(--ink-2); font-weight: 500; }
  .chips-requisitos .req-nivel { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 10px; flex-basis: 100%; }
  .chips-requisitos .req-datos { display: flex; flex-wrap: wrap; gap: 3px 14px; }
  .chips-requisitos .req-rot { color: var(--ink); font-weight: 600; }
  .chips-requisitos .req-usa { flex-basis: 100%; margin-top: 2px; }

  /* Celular: cada pieza apilada */
  @media (max-width: 560px) {
    table.piezas, table.piezas tbody { display: block; }
    table.piezas tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    table.piezas tbody tr + tr td { border-top: 0; }
    table.piezas td { display: block; padding: 0; border: 0; width: auto; }
    table.piezas td.cat { grid-column: 1 / -1; }
    table.piezas td:nth-child(2) { grid-column: 1 / -1; }
    table.piezas td.num { text-align: right; }
    summary > span:first-child { flex-basis: 100%; }
  }

  /* Historial, seguir precios, comparar, compartir */
  .tend { display: block; font-size: 12.5px; margin-top: 3px; }
  .tend.baja { color: var(--ok); } .tend.sube { color: var(--bad); } .tend.igual { color: var(--muted); }
  .tend a { color: var(--ink-2); text-decoration-color: var(--line-2); }
  .tend a:hover { color: var(--ink); }
  .seguir { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-top: 6px; border: 0; background: none; color: var(--muted); padding: 2px 0; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .seguir:hover { color: var(--ink); }
  .seguir[aria-pressed="true"] { color: var(--accent-text); text-decoration: none; }
  .seguir[aria-pressed="true"]::before { content: "✓"; }
  #seguidos { margin-top: 56px; }
  #seguidos h2 { margin: 0 0 10px; }
  #seguidos .seguir { margin: 0; }
  .avisar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 0; }
  .avisar input { flex: 1 1 240px; }
  .acciones { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 18px; }
  .barra-comparar { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 15; box-shadow: var(--float); }
  .barra-comparar:active { transform: translateX(-50%) scale(.98); }
  .toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; z-index: 20; box-shadow: var(--float); }
  .compartido { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 18px; }

  dialog { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); padding: 22px; width: min(640px, calc(100vw - 24px)); max-height: calc(var(--alto) - 48px); overscroll-behavior: contain; box-shadow: var(--float); }
  dialog::backdrop { background: var(--backdrop, rgb(6 7 8 / .72)); }
  dialog h3 { margin: 0 0 4px; font-size: 17px; padding-right: 40px; }
  .cerrar-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: var(--muted); cursor: pointer; font-size: 18px; }
  .cerrar-x:hover { background: var(--surface-2); color: var(--ink); }
  dialog.comparar { width: min(1040px, calc(100vw - 24px)); }
  /* Guia de piezas: una pagina para quien nunca abrio una PC. */
  #tab-guia { max-width: clamp(1240px, 74vw, 1800px); margin-inline: auto; }
  .guia-t { margin: 40px 0 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  /* Diagrama de la PC: dibujo técnico de líneas, en los colores de la interfaz.
     Al elegir una pieza se prende en lima, junto con lo que la conecta:
     la corriente desde la fuente, los datos desde el procesador, el aire del
     gabinete. Sus ventiladores giran. Nada se mueve solo: todo responde a lo
     que se toca, y con "reducir movimiento" queda quieto. */
  .pc-mapa { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: clamp(24px, 3vw, 56px); align-items: start; margin: 12px 0 8px; }
  .pc-diagrama { margin: 0; background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: clamp(14px, 2vw, 28px); box-shadow: var(--hi); }
  .pc-diagrama svg { width: 100%; height: auto; display: block; overflow: visible; }
  .pc-parte { cursor: pointer; outline: none; }
  .pc-parte .forma, .pc-parte .forma rect { fill: var(--surface); stroke: var(--line-hover); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
  .pc-parte[data-p="case"] .forma { fill: none; stroke: var(--line-2); stroke-width: 2; }
  .pc-parte[data-p="motherboard"] .forma { fill: var(--surface-2); }
  .pc-parte .detalle { fill: none; stroke: var(--line-hover); stroke-width: 1.1; transition: stroke .2s; }
  .pc-parte[data-p="motherboard"] .detalle rect { fill: var(--surface-3); }
  /* Las aspas viven adentro de un <use>: el color les llega por herencia desde el grupo. */
  .ventilador { transform-box: fill-box; transform-origin: center; fill: var(--pc, var(--line-2)); transition: fill .2s; }
  /* La pieza elegida. */
  .pc-diagrama[data-activa="cpu"] [data-p="cpu"], .pc-diagrama[data-activa="gpu"] [data-p="gpu"], .pc-diagrama[data-activa="ram"] [data-p="ram"],
  .pc-diagrama[data-activa="ssd"] [data-p="ssd"], .pc-diagrama[data-activa="motherboard"] [data-p="motherboard"], .pc-diagrama[data-activa="psu"] [data-p="psu"],
  .pc-diagrama[data-activa="cooler"] [data-p="cooler"], .pc-diagrama[data-activa="case"] [data-p="case"] { --pc: var(--accent); --pc-fondo: var(--accent-soft); }
  .pc-parte .forma, .pc-parte .forma rect { stroke: var(--pc, var(--line-hover)); fill: var(--pc-fondo, var(--surface)); }
  .pc-parte[data-p="motherboard"] .forma { fill: var(--pc-fondo, var(--surface-2)); }
  .pc-parte[data-p="case"] .forma { fill: none; stroke: var(--pc, var(--line-2)); }
  .pc-parte .detalle { stroke: var(--pc, var(--line-hover)); }
  .pc-parte:focus-visible .forma { stroke-width: 3; }
  /* Sus ventiladores giran. */
  .pc-diagrama[data-activa="cooler"] [data-p="cooler"] .ventilador, .pc-diagrama[data-activa="cpu"] [data-p="cooler"] .ventilador,
  .pc-diagrama[data-activa="gpu"] [data-p="gpu"] .ventilador, .pc-diagrama[data-activa="psu"] [data-p="psu"] .ventilador,
  .pc-diagrama[data-activa="case"] [data-p="case"] .ventilador { animation: girar 1.4s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }
  /* Corriente, datos y aire: tenues siempre; encendidos y en movimiento con la pieza que los usa. */
  .flujo path { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 5 7; stroke-linecap: round; opacity: .55; transition: opacity .2s, stroke .2s; }
  .aire polygon { fill: var(--accent); opacity: 0; transition: opacity .2s; }
  /* El aire pasa por encima del dibujo: sin elegir, casi no se ve. */
  .flujo.aire path { opacity: .22; }
  .pc-diagrama[data-activa="psu"] .energia path, .pc-diagrama[data-activa="motherboard"] .energia path:nth-child(1), .pc-diagrama[data-activa="gpu"] .energia path:nth-child(2), .pc-diagrama[data-activa="cpu"] .energia path:nth-child(3),
  .pc-diagrama[data-activa="cpu"] .datos path, .pc-diagrama[data-activa="ram"] .datos path:nth-child(1), .pc-diagrama[data-activa="gpu"] .datos path:nth-child(2), .pc-diagrama[data-activa="ssd"] .datos path:nth-child(3),
  .pc-diagrama[data-activa="case"] .aire path, .pc-diagrama[data-activa="cooler"] .aire path { stroke: var(--accent); opacity: 1; stroke-width: 2.5; animation: fluir .9s linear infinite; }
  .pc-diagrama[data-activa="case"] .aire polygon, .pc-diagrama[data-activa="cooler"] .aire polygon, .pc-diagrama[data-recorrido="aire"] .aire polygon { opacity: 1; }
  @keyframes fluir { to { stroke-dashoffset: -24; } }
  @media (prefers-reduced-motion: reduce) { .ventilador, .flujo path { animation: none !important; } }
  .pc-diagrama .rotulos path { fill: none; stroke: var(--line-2); stroke-width: 1; transition: stroke .2s; }
  .pc-diagrama .rotulos text { fill: var(--ink-2); font-size: 15px; font-family: inherit; transition: fill .2s, opacity .2s; }
  /* Grilla de plano: se ve apenas, como el papel de un dibujo técnico. */
  .pc-diagrama .plano { fill: none; stroke: var(--line); stroke-width: .6; }
  /* Pasar por encima de una pieza que no está elegida la delinea. */
  .pc-parte:not(.es-activa):hover .forma, .pc-parte:not(.es-activa):hover .forma rect { stroke: var(--ink-2); }
  /* Con una pieza elegida, lo demás se corre un paso atrás: se lee qué se está mirando. */
  .pc-diagrama[data-activa] .pc-parte:not(.es-activa) { opacity: .42; transition: opacity .25s; }
  .pc-diagrama[data-activa] .pc-parte[data-p="case"]:not(.es-activa) { opacity: .7; }
  .pc-diagrama[data-activa] .rotulos g:not(.es-activa) text { opacity: .5; }
  .pc-diagrama .rotulos g.es-activa path { stroke: var(--accent); }
  .pc-diagrama .rotulos g.es-activa text { fill: var(--accent-text); font-weight: 600; }
  /* Cotas: aparecen con la pieza que se mide. */
  .cotas > g { opacity: 0; transition: opacity .25s; }
  .cotas > g.es-activa { opacity: 1; }
  .cotas path { fill: none; stroke: var(--accent); stroke-width: 1.2; }
  .cotas text { fill: var(--accent-text); font-size: 12.5px; font-family: inherit; }
  /* Un recorrido entero, desde la leyenda. */
  .pc-diagrama[data-recorrido="energia"] .energia path, .pc-diagrama[data-recorrido="datos"] .datos path, .pc-diagrama[data-recorrido="aire"] .aire path { stroke: var(--accent); opacity: 1; stroke-width: 2.5; animation: fluir .9s linear infinite; }
  .pc-diagrama[data-recorrido="energia"] [data-p="psu"], .pc-diagrama[data-recorrido="datos"] [data-p="cpu"], .pc-diagrama[data-recorrido="aire"] [data-p="case"] { --pc: var(--accent); --pc-fondo: var(--accent-soft); }
  .pc-diagrama[data-recorrido="aire"] [data-p="case"] .ventilador, .pc-diagrama[data-recorrido="aire"] [data-p="cooler"] .ventilador, .pc-diagrama[data-recorrido="energia"] [data-p="psu"] .ventilador { animation: girar 1.4s linear infinite; }
  .pc-diagrama figcaption { font-size: 13.5px; color: var(--muted); margin-top: 10px; max-width: 62ch; }
  /* La ficha de la pieza elegida, al costado: qué hace, con qué se conecta y cuánto sale hoy. */
  .pc-ficha { position: sticky; top: calc(var(--top-h) + 56px); border-left: 2px solid var(--accent); padding: 4px 0 4px clamp(18px, 2vw, 28px); min-height: 240px; }
  .pc-ficha h3 { font-size: clamp(22px, 1.6vw, 28px); margin: 2px 0 10px; }
  .pc-ficha h3 .ico { color: var(--accent-text); vertical-align: -0.1em; }
  .pc-ficha h3 small { display: block; margin: 2px 0 0; font-size: 14px; }
  .pc-ficha > p { margin: 0 0 10px; color: var(--ink-2); max-width: 52ch; }
  .pc-ficha .donde { font-size: 13.5px; color: var(--muted); }
  .pc-ficha h4 { font-size: 13px; font-weight: 500; color: var(--muted); margin: 20px 0 8px; }
  .pc-ficha-vacia { color: var(--ink-2); font-size: 16px; margin: 0 0 18px; max-width: 40ch; }
  /* El índice de piezas: renglones como los de una lista de precios, con el "desde" alineado. */
  .pc-indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .pc-indice li { border-bottom: 1px solid var(--line); }
  .pc-indice button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; transition: background-color .15s; }
  .pc-indice button:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .pc-indice .ico { font-size: 18px; color: var(--muted); transition: color .15s; }
  .pc-indice button:hover .ico { color: var(--accent-text); }
  .pc-indice b { font-weight: 500; }
  .pc-indice .num { font-size: 13px; color: var(--muted); }
  .pc-leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .pc-leyenda button { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); box-shadow: var(--hi); color: var(--ink-2); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
  .pc-leyenda button:hover { border-color: var(--line-hover); color: var(--ink); }
  .pc-leyenda button i { width: 22px; height: 0; border-top: 2px dashed var(--line-hover); }
  .pc-leyenda button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); color: var(--ink); }
  .pc-leyenda button[aria-pressed="true"] i { border-top-color: var(--accent); }
  /* Glosario: la forma real de cada cosa, dibujada en líneas. */
  .pieza-guia.con-foto { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; }
  .pieza-guia.con-foto > .pieza-foto { grid-row: 1 / span 4; width: 88px; height: 88px; aspect-ratio: 1; margin: 2px 0 0; border-radius: var(--r-md); }
  .pieza-guia.con-foto > .pieza-foto .foto { padding: 10%; }
  .pieza-guia.con-glifo { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 18px; }
  .pieza-guia.con-glifo > .glifo { grid-row: 1 / span 3; width: 80px; height: 55px; margin-top: 4px; overflow: visible; }
  .glifo .g-borde { fill: none; stroke: var(--line-hover); stroke-width: 1.2; }
  .glifo .g-relleno circle { fill: var(--muted); }
  .glifo .g-acento { fill: none; stroke: var(--accent); stroke-width: 1.4; }
  .glifo .g-acento-relleno, .glifo .g-acento-relleno rect { fill: var(--accent); }
  .glifo .g-gris { fill: var(--surface-3); }
  .glifo .g-corte { fill: var(--bg); stroke: var(--accent); stroke-width: 1; }
  .glifo text { fill: var(--muted); font-size: 6.5px; font-family: inherit; }
  .pieza-guia.con-glifo:hover .glifo .g-borde { stroke: var(--ink-2); }
  .pc-con { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .pc-con li { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 12px; align-items: baseline; font-size: 13.5px; color: var(--muted); }
  .pc-con button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 0; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
  .pc-con button b { font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .pc-con button:hover b { text-decoration-color: currentColor; }
  .pc-con button .ico { color: var(--muted); }
  .pc-hoy p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .pc-hoy b { color: var(--ink); }
  .pc-tira { width: 100%; height: 26px; display: block; margin: 4px 0 10px; }
  .pc-tira .puntos line { stroke: var(--muted); stroke-opacity: .6; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .pc-tira .mediana { stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
  .pieza-guia { scroll-margin-top: calc(var(--top-h) + 60px); transition: background-color .15s; }
  .pieza-guia.activa { background: var(--accent-soft); border-radius: var(--r-md); padding-left: 12px; padding-right: 12px; }
  /* Se elige con clic, no al pasar el mouse: el puntero lo avisa. */
  .pieza-guia[data-p] { cursor: pointer; }
  .pieza-guia:focus { outline: none; }
  @media (max-width: 1000px) { .pc-mapa { grid-template-columns: 1fr; } .pc-ficha { position: static; min-height: 0; } }
  /* En un celular los rótulos quedarían de 5px: se esconden y el dibujo se recorta a la PC. */
  @media (max-width: 520px) { .pc-diagrama .rotulos { display: none; } .pc-diagrama svg { overflow: hidden; } }
  .guia-grid { display: grid; gap: 0 clamp(28px, 3vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(340px, 24vw, 440px)), 1fr)); align-items: stretch; }
  .pieza-guia { padding: 16px 0; border-top: 1px solid var(--line); }
  .pieza-guia b { font-size: clamp(16px, 0.85vw, 19px); font-weight: 600; }
  .pieza-guia b span { font-weight: 400; color: var(--muted); font-size: 13.5px; margin-left: 6px; }
  .pieza-guia p { margin: 5px 0 0; color: var(--ink-2); max-width: 58ch; font-size: clamp(15px, 0.76vw, 17.5px); }
  .pieza-guia .donde { font-size: 13px; color: var(--muted); }
  .guia-cierre { margin: 44px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
  .guia-cierre p { margin: 0; max-width: 60ch; }
  .abrir-guia { margin: 10px 0 0; }
  .tabla-comparar th, .tabla-comparar td { min-width: 190px; }
  .tabla-comparar th:first-child, .tabla-comparar td:first-child { min-width: 0; font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
  .tabla-comparar thead th { color: var(--ink); font-size: 14px; font-weight: 700; }
  .tabla-comparar td.dif { background: var(--accent-soft); }
  #tab-comparar { max-width: 1120px; margin-inline: auto; }
  /* Comparar dos productos: una mariposa. El dato en el medio; cada producto
     hacia su lado, con barras en la misma escala por fila. */
  .vs-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: start; margin: 8px 0 24px; }
  .vs-prod { display: grid; gap: 6px; }
  .vs-prod.a { justify-items: end; text-align: right; }
  .vs-prod .gondola { width: min(100%, 240px); aspect-ratio: 1; }
  .vs-nom { font-weight: 600; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.3; text-decoration: none; max-width: 36ch; }
  .vs-nom:hover { text-decoration: underline; }
  .vs-prod .p { font-size: clamp(28px, 2.4vw, 38px); }
  .vs-prod small { color: var(--muted); font-size: 13px; }
  .vs-mitad { align-self: center; font-size: 13px; color: var(--muted); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .02em; }
  .vs-titular { font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); text-align: center; max-width: 760px; margin: 0 auto 28px; text-wrap: balance; }
  .vs-titular b { color: var(--ink); font-weight: 600; }
  .vs-grupo { margin-top: 28px; }
  .vs-grupo h2 { font-size: 16px; margin: 0 0 6px; text-align: center; }
  .vs-grupo h2 small { display: block; margin: 2px 0 0; }
  .vs-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 170px) minmax(0, 1fr); gap: 16px; align-items: center; min-height: 42px; border-top: 1px solid var(--line); color: var(--muted); }
  .vs-fila .k { text-align: center; font-size: 13px; }
  .vs-fila .a, .vs-fila .b { display: flex; align-items: center; gap: 10px; min-width: 0; font-variant-numeric: tabular-nums; }
  .vs-fila .a { justify-content: flex-end; }
  .vs-fila .pista { flex: 1; display: flex; min-width: 40px; }
  .vs-fila .a .pista { justify-content: flex-end; }
  .vs-fila i { display: block; height: 10px; border-radius: 2px; background: var(--surface-3); }
  .vs-fila b { font-weight: 500; white-space: nowrap; color: var(--ink-2); }
  .vs-fila.texto .a, .vs-fila.texto .b { font-weight: 500; color: var(--ink-2); }
  /* Lo que cambia: el valor en tinta plena y la barra marcada. */
  .vs-fila.dif .k { color: var(--ink-2); }
  .vs-fila.dif b, .vs-fila.dif.texto .a, .vs-fila.dif.texto .b { color: var(--ink); font-weight: 700; }
  .vs-fila.dif i { background: var(--ink-2); }
  @media (max-width: 640px) {
    .vs-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
    .vs-mitad { display: none; }
    .vs-prod.a { justify-items: start; text-align: left; }
    .vs-prod .p { font-size: 24px; }
    .vs-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 12px; padding: 8px 0; }
    .vs-fila .k { grid-column: 1 / -1; text-align: left; }
    .vs-fila .a { justify-content: flex-start; flex-direction: row-reverse; }
    .vs-fila .a .pista { justify-content: flex-start; }
    .vs-titular { text-align: left; }
  }
  .comparar-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
  .tabla-comparar .precio { display: block; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
  .tabla-comparar tfoot td { font-weight: 700; font-size: 16px; border-top: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }

  /* La ficha impresa: el artefacto de la marca. Adentro cambian los tokens, no los componentes. */
  .papel {
    --surface: var(--papel); --surface-2: #e9ebee; --surface-3: #dde0e4;
    --ink: var(--papel-ink); --ink-2: #333941; --muted: #5f666e;
    --line: var(--papel-line); --line-2: #c8ccd1; --line-hover: #9aa0a8;
    --accent-text: #3d5600; --accent-soft: #eef7d4; --accent-line: #9cba3e;
    --ok: #16702f; --bad: #ab2b21; --warn: #7d5200;
    --card: #ffffff; --card-line: rgb(11 13 12 / .12); --hi: none; --campo: #8a918b; --glow: 0 0 0 4px rgb(141 198 63 / .3);
    background: var(--papel); color: var(--papel-ink);
    box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset;
  }
  .papel a { color: var(--papel-ink); text-decoration-color: #b9bec4; }
  .papel a:hover { color: var(--accent-text); }

  /* Foto de producto: sobre fondo claro, como en la gondola; si no carga, queda el hueco neutro */
  .foto { display: block; width: 44px; height: 44px; object-fit: contain; background: var(--foto); border-radius: var(--r-foto); padding: 3px; }
  .foto.vacia { display: grid; place-items: center; color: var(--line-hover); font-size: 22px; }
  .prod .foto.vacia { font-size: 44px; }
  .prod-cab .foto.vacia { font-size: 90px; }
  .con-foto { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start; }
  .con-foto > .foto { width: 56px; height: 56px; }

  /* Armar y Mejorar preguntan de a una cosa: se ve la pregunta actual y nada mas. */
  #tab-armar, #tab-upgrade { max-width: 1240px; margin-inline: auto; }
  .guia { width: 100%; max-width: clamp(680px, 44vw, 1000px); margin-inline: auto; }
  /* Armar: la pregunta a la izquierda y, a la derecha, el ticket de cómo quedaría hoy (el mismo del
     inicio). Con resultados en pantalla, el ticket se va: los armados de abajo ya lo dicen todo. */
  .armar-guiado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .armar-guiado > .guia { max-width: none; margin: 0; }
  .armar-guiado:has(> .armar-ticket[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .armar-guiado:has(> .armar-ticket[hidden]) > .guia { max-width: clamp(680px, 44vw, 1000px); margin-inline: auto; }
  #tab-armar:not(:has(#out-armar:empty)) .armar-ticket { display: none; }
  #tab-armar:not(:has(#out-armar:empty)) .armar-guiado { grid-template-columns: minmax(0, 1fr); }
  .armar-ticket .ticket-pie b { font-variant-numeric: tabular-nums; }

  /* Mejorar: la escala de rendimiento. Un renglón por placa, de la que menos rinde a la que más, con la
     barra en la misma escala para todas (como el reparto): las de antes en gris y sin precio, las de hoy en
     tinta con su precio, la tuya en lima. Con resultados en pantalla se va, como el ticket de Armar. */
  .escala { max-width: 980px; margin: clamp(40px, 6vh, 72px) auto 0; padding-top: 24px; border-top: 1px solid var(--line-2); }
  .escala h2 { margin: 0 0 6px; font-size: clamp(22px, 1.7vw, 28px); }
  .escala > .hint { margin: 0 0 10px; max-width: 70ch; }
  .escala-tuya { margin: 0 0 14px; min-height: 1.4em; color: var(--ink-2); }
  .escala-lista { list-style: none; margin: 0; padding: 0; }
  .escala-lista li { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) 52px minmax(150px, 190px); align-items: center; column-gap: 16px; padding: 7px 8px; border-top: 1px solid var(--line); font-size: 14px; }
  .escala-lista .en a { color: var(--ink); text-decoration: none; }
  .escala-lista .en a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .escala-lista li.escala-mas { display: block; border-top: 1px solid var(--line); padding: 16px 0 0; }
  .escala-lista .eb { height: 8px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
  .escala-lista .eb i { display: block; height: 100%; background: var(--ink-2); border-radius: 2px; }
  .escala-lista .es { text-align: right; font-weight: 700; }
  .escala-lista .ep { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
  .escala-lista .ep b { color: var(--ok); font-weight: 600; }
  .escala-lista li.vieja .en, .escala-lista li.vieja .es { color: var(--muted); }
  .escala-lista li.vieja .eb i { background: var(--surface-3); }
  .escala-lista li.tuya { background: var(--accent-soft); border-radius: var(--r-sm); }
  .escala-lista li.tuya .eb i { background: var(--accent); }
  .escala-lista li.tuya .en, .escala-lista li.tuya .ep { color: var(--ink); font-weight: 600; }
  #tab-upgrade:not(:has(#out-upgrade:empty)) .escala { display: none; }
  @media (max-width: 719px) {
    .escala-lista li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .escala-lista .eb { grid-column: 1 / -1; grid-row: 2; }
    .escala-lista .ep { grid-column: 1 / -1; }
  }
  @media (max-width: 1023px) { .armar-guiado { grid-template-columns: minmax(0, 1fr); } }
  /* Mientras no hay resultados, la pregunta va en el medio de la pantalla y no
     colgada arriba con medio metro de vacio abajo. */
  #tab-armar:has(#out-armar:empty), #tab-upgrade:has(#out-upgrade:empty) {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(var(--alto) - var(--top-h) - 200px);
  }
  .paso.fuera { display: none; }
  .paso.entra { animation: pasoEntra .22s var(--ease) both; }
  @keyframes pasoEntra { from { opacity: 0; transform: translateY(10px); } }
  @media (prefers-reduced-motion: reduce) { .paso.entra { animation: none; } }
  /* El hilo entre pasos no va: ahora se ve uno solo y el numero lo pone el guion. */
  .guia > .paso::before { content: none; }
  .paso-nav { padding-left: 0; }
  .recap { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 20px; padding: 14px 0 0; border-top: 1px solid var(--line); }
  .recap dt { font-size: clamp(12.5px, 0.6vw, 14.5px); color: var(--muted); }
  .recap dd { margin: 2px 0 0; font-size: clamp(15px, 0.75vw, 17.5px); font-weight: 500; }
  .recap dd.falta { color: var(--muted); font-weight: 400; }
  .recap dd.monto { font-size: clamp(19px, 1.05vw, 26px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .paso-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .paso-cuenta { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 0; font-size: clamp(12.5px, 0.6vw, 14.5px); color: var(--muted); font-variant-numeric: tabular-nums; }
  .borrar-guardado { margin: 0; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .borrar-guardado:hover { color: var(--ink); }
  @media (max-width: 720px) { .paso-acciones .btn { flex: 1 0 auto; justify-content: center; } }

  /* Inicio: los numeros del catalogo y lo que bajo esta semana (datos reales, con foto) */
  /* Secciones del inicio, como en una publicación: un filete arriba, el título y la bajada en
     una columna angosta a la izquierda y los datos ocupando el resto. En pantallas chicas se apilan. */
  .vitrina, .bajas, .marcas, .mapa { margin-top: clamp(64px, 9vh, 104px); padding-top: 24px; border-top: 1px solid var(--line-2); }
  .marcas-cab { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
  .marcas-cab h2 { margin: 0 0 6px; }
  .marcas-cab .hint { margin: 0 0 20px; }
  .marcas-controles { display: flex; gap: 8px; }
  .marcas-controles button { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 27px; cursor: pointer; }
  .marcas-controles button:hover { border-color: var(--accent-text); }
  .marcas-lista { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: thin; }
  .marcas-lista button { flex: 0 0 138px; height: 66px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink); cursor: pointer; }
  .marcas-lista button img { display: block; width: 100%; height: 40px; object-fit: contain; filter: brightness(0) invert(1); }
  :root[data-theme="light"] .marcas-lista button img { filter: brightness(0); }
  .marcas-lista button[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent); color: var(--accent-ink); }
  .marcas-lista button[aria-pressed="true"] img, :root[data-theme="light"] .marcas-lista button[aria-pressed="true"] img { filter: brightness(0); }
  .marcas-escena { display: grid; grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 22px); }
  .marcas-escena a { min-width: 0; text-decoration: none; color: var(--ink); }
  .marca-portada { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
  .marca-imagen { display: block; min-height: 210px; background: var(--foto); overflow: hidden; }
  .marca-imagen .foto { width: 100%; height: 100%; max-height: 290px; padding: 8%; object-fit: contain; mix-blend-mode: multiply; }
  .marca-portada-txt { display: grid; gap: 4px; padding: 16px; }
  .marca-portada-txt strong { font-size: clamp(24px, 2.3vw, 36px); line-height: 1; }
  .marca-portada-txt > span:not(.marca-ver) { color: var(--muted); font-size: 13px; }
  .marca-ver { margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
  .marca-producto { display: grid; grid-template-rows: auto auto minmax(38px, auto) auto auto; align-content: start; gap: 5px; }
  .marca-producto .gondola { margin: 0 0 5px; border-bottom: 3px solid var(--line-2); border-radius: var(--r-md) var(--r-md) 0 0; transition: border-color .2s; }
  .marca-producto:hover .gondola, .marca-producto:focus-visible .gondola { border-bottom-color: var(--accent); }
  .marca-producto .rotulo { color: var(--muted); font-size: 12px; }
  .marca-producto b { font-size: 14px; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .marca-precio .p { font-size: clamp(19px, 1.8vw, 25px); }
  .marca-producto small { color: var(--muted); font-size: 12px; }
  @media (max-width: 700px) {
    .marcas-escena { grid-auto-flow: column; grid-auto-columns: minmax(220px, 70vw); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
    .marcas-escena a { scroll-snap-align: start; }
    .marca-imagen { min-height: 180px; }
  }
  @media (min-width: 1200px) {
    .bajas, .mapa { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3.4fr); column-gap: clamp(40px, 4vw, 80px); align-items: start; }
    /* La cabecera se deshace en la columna: título, bajada y, al final, el link. */
    .bajas > .seccion-cab, .mapa > .seccion-cab { display: contents; }
    .bajas h2, .mapa h2, .bajas > .hint, .mapa > .hint, .bajas .seccion-cab > .link-accion { grid-column: 1; }
    .bajas h2, .mapa h2 { grid-row: 1; } .bajas > .hint, .mapa > .hint { grid-row: 2; }
    .bajas .seccion-cab > .link-accion { grid-row: 3; justify-self: start; margin-top: 4px; }
    .bajas > .tablero, .mapa > #mapa-lista { grid-column: 2; grid-row: 1 / span 4; }
    .bajas > .tablero { border-top: 0; }
    .vitrina h2, .bajas h2, .mapa h2 { font-size: clamp(24px, 1.9vw, 30px); }
  }
  .vitrina h2 { margin: 0 0 6px; }
  .vitrina > .hint { margin: 0 0 20px; }

  /* Fotos de categoría para navegar; los datos superpuestos vienen de /api/vitrina. */
  .vitrina-grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.5vw, 22px);
    grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(155px, 14vw, 205px));
    grid-template-areas: "gpu gpu cpu ram case" "motherboard ssd psu cooler case"; }
  .vt-gpu { grid-area: gpu; } .vt-cpu { grid-area: cpu; } .vt-case { grid-area: case; } .vt-motherboard { grid-area: motherboard; }
  .vt-ram { grid-area: ram; } .vt-ssd { grid-area: ssd; } .vt-psu { grid-area: psu; } .vt-cooler { grid-area: cooler; }
  .vt > a { position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: #181a1b; text-decoration: none; color: #fff; }
  .vt > a::after { content: ''; position: absolute; inset: auto 0 0; height: 76px; z-index: -1; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
  .vt-fondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
  .vt > a:hover .vt-fondo, .vt > a:focus-visible .vt-fondo { transform: scale(1.045); }
  .vt > a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .vt-txt { position: absolute; inset: auto 10px 12px; display: grid; gap: 4px; text-align: center; }
  .vt-txt b { font-size: clamp(17px, 1.55vw, 22px); line-height: 1.08; font-weight: 700; text-wrap: balance; }
  .vt-gpu .vt-txt b { font-size: clamp(21px, 2vw, 27px); }
  .vt-dato { font-size: 11px; color: #fff; font-variant-numeric: tabular-nums; }
  .vt-gpu .vt-fondo { object-position: 50% 60%; }
  .vt-cpu .vt-fondo { object-position: 58% 50%; }
  .vt-case .vt-fondo { object-position: 60% 50%; }
  .vt > a:hover .vt-txt b { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
  @media (min-width: 601px) and (max-width: 1000px) {
    .vitrina-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 170px);
      grid-template-areas: "gpu cpu ram case" "motherboard ssd psu cooler"; }
    .vt-gpu .vt-txt b { font-size: 19px; }
  }
  @media (max-width: 600px) {
    .vitrina-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 155px 145px; gap: 10px;
      grid-template-areas: "gpu gpu" "cpu ram"; }
    .vt:not(.vt-gpu):not(.vt-cpu):not(.vt-ram) { display: none; }
    .vt-txt { inset: auto 9px 12px; }
    .vt-dato { line-height: 1.25; }
  }
  .bajas h2 { margin: 0 0 6px; }
  .bajas > .hint { margin: 0 0 20px; }
  .seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .seccion-cab .link-accion { flex: none; font-size: 14px; }

  /* Tablero de bajas: renglones, como la pizarra de ofertas de un local. Antes
     tachado, hoy grande, cuánto bajó y la curva de los últimos días. */
  .tablero { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); column-gap: clamp(24px, 3vw, 56px); border-top: 1px solid var(--line); }
  .tablero li { border-bottom: 1px solid var(--line); container-type: inline-size; }
  /* Cada renglón decide por su propio ancho: angosto, la curva se va y el nombre gana lugar. */
  @container (max-width: 520px) {
    /* Precio arriba y cuánto bajó abajo, en la misma columna: el nombre entra en dos líneas. */
    .tablero li a { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 14px; }
    .tablero li .foto, .tablero li .nom { grid-row: span 2; }
    .tablero .minicurva { display: none; }
    .tablero li .valores { grid-column: 3; grid-row: 1; align-self: end; }
    .tablero li .caida { grid-column: 3; grid-row: 2; align-self: start; display: flex; justify-content: flex-end; gap: 6px; align-items: baseline; font-size: 13.5px; white-space: nowrap; }
  }
  /* Muy angosto (celular): el "desde el 21/09" se va; la bajada de la sección ya dice contra qué se compara. */
  @container (max-width: 420px) { .tablero li .caida small { display: none; } }
  .tablero a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 72px auto minmax(88px, auto); align-items: center; gap: 4px 16px; padding: 12px 10px 12px 6px; margin: 0 -6px; text-decoration: none; color: var(--ink); }
  .tablero a { border-radius: var(--r-md); transition: background-color .15s; }
  .tablero a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .tablero .foto { width: 56px; height: 56px; padding: 4px; }
  .tablero .nom { min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
  .tablero .nom > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tablero .nom small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; margin-top: 2px; }
  .tablero .valores { display: grid; justify-items: end; line-height: 1.15; }
  .tablero .valores .antes { font-size: 12.5px; }
  .tablero .valores .p { font-size: 19px; }
  .tablero .caida { justify-self: end; text-align: right; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
  .tablero .caida small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
  .minicurva { overflow: visible; }
  .minicurva polyline { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
  .minicurva circle { fill: var(--muted); }
  .minicurva.baja polyline { stroke: var(--ok); } .minicurva.baja circle { fill: var(--ok); }
  .minicurva.sube polyline { stroke: var(--bad); } .minicurva.sube circle { fill: var(--bad); }
  @media (max-width: 640px) {
    .tablero .foto { width: 48px; height: 48px; }
  }

  /* Mapa de precios: un punto por producto, todas las piezas en la misma escala. */

  .mapa h2 { margin: 0 0 6px; }
  .mapa > .hint { margin: 0 0 18px; max-width: 72ch; }
  .mapa-fila { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 6px 8px; margin: 0 -8px; border-top: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); transition: background-color .15s; }
  a.mapa-fila:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  a.mapa-fila:hover .puntos line { stroke: var(--ink-2); }
  .mapa-cat { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
  .mapa-cat .ph-cat { grid-row: span 2; align-self: center; margin: 0; }
  .mapa-cat b { font-weight: 500; font-size: 14.5px; }
  .mapa-cat small { grid-column: 2; color: var(--muted); font-size: 12px; }
  .mapa-fila > svg { width: 100%; height: 34px; display: block; overflow: visible; }
  .mapa-fila .guias line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .mapa-fila .franja-q { fill: var(--surface-2); }
  .mapa-fila .puntos line { stroke: var(--muted); stroke-opacity: .55; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .mapa-fila .mediana { stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
  .mapa-escala { border-top: 0; padding: 0 0 4px; }
  .mapa-escala > div { position: relative; height: 16px; }
  .mapa-escala > div span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) {
    .mapa-fila { grid-template-columns: 1fr; gap: 2px; padding: 10px 0 8px; }
    .mapa-escala { position: sticky; top: calc(var(--top-h) + 36px); }
    .mapa-escala > span { display: none; }
    .mapa-escala > div span:nth-child(even) { display: none; }
  }

  /* Asistente */
  #tab-chat { display: grid; grid-template-rows: 1fr auto; min-height: calc(var(--alto) - var(--top-h) - 40px); max-width: 880px; margin-inline: auto; width: 100%; }
  /* Sin conversacion todavia: la caja de escribir va pegada a los ejemplos, no al fondo de la pantalla */
  #tab-chat:has(#welcome:not(.visually-hidden)) { display: flex; flex-direction: column; justify-content: center; min-height: calc(var(--alto) - var(--top-h) - 200px); max-width: clamp(1000px, 62vw, 1440px); }
  #tab-chat:has(#welcome:not(.visually-hidden)) .composer { order: 2; }
  #sugs { order: 3; margin-top: 22px; }
  #tab-chat:has(#welcome:not(.visually-hidden)) .composer { position: static; background: none; padding-top: 24px; }
  .welcome { padding: clamp(8px, 4vh, 40px) 0 8px; }
  .welcome .lead { margin-bottom: 4px; }
  .sugs { display: grid; gap: 0 clamp(24px, 3vw, 48px); grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
  @media (max-width: 720px) { .sugs { grid-template-columns: 1fr; } }
  .sugs-t { margin: 0 0 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
  .sugs button { text-align: left; font: inherit; background: none; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(14px, 0.9vw, 20px) 32px clamp(14px, 0.9vw, 20px) 8px; margin: 0 -8px; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; row-gap: 2px; align-items: center; position: relative; transition: color .15s; }
  .sugs button > .ico { grid-row: span 2; font-size: 26px; color: var(--muted); transition: color .15s; }
  .sugs button:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
  .sugs button:hover > .ico { color: var(--accent-text); }
  .sugs button > span { grid-column: 2; }
  /* Las del día llevan la foto del producto en su góndola, en vez del ícono. */
  .sugs-hoy { margin-bottom: 26px; }
  .sugs-hoy button { grid-template-columns: 56px 1fr; column-gap: 14px; }
  .sugs-hoy button > .gondola { grid-column: 1; grid-row: span 2; width: 56px; height: 56px; aspect-ratio: auto; margin: 0; border-radius: var(--r-md); }
  .sugs-hoy button > .gondola .foto { padding: 8%; }
  .sugs-hoy button > span:not(.gondola) { font-variant-numeric: tabular-nums; }
  .sugs button::after { content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s var(--ease), border-color .15s; }
  .sugs button:hover::after { border-color: var(--accent-text); transform: translateX(3px) rotate(45deg); }
  .sugs b { font-size: clamp(16px, 0.85vw, 19px); font-weight: 500; }
  .sugs span { font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  #chat-log { display: grid; gap: 24px; padding: 8px 0 24px; max-width: 820px; width: 100%; }
  .msg { overflow-wrap: anywhere; animation: entra .18s var(--ease) both; }
  .msg.user { justify-self: end; max-width: 78%; background: var(--surface-2); color: var(--ink); padding: 11px 16px; border-radius: 12px 12px 3px 12px; white-space: pre-wrap; }
  .msg.bot .who { font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-bottom: 6px; }
  .msg.bot p { margin: 0 0 10px; max-width: 72ch; } .msg.bot p:last-child { margin-bottom: 0; }
  .msg.bot ul { margin: 0 0 10px; padding-left: 20px; } .msg.bot li { margin: 4px 0; }
  .msg.bot a { text-decoration-color: var(--accent-line); }
  .msg.bot table { font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: 6px 0 12px; }
  .msg .tools { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; }
  .msg .tools span { font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
  .msg.error { color: var(--ink); background: var(--bad-bg); padding: 12px 14px; border-radius: var(--r-md); }
  .typing { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: punto 1.2s infinite ease-in-out; }
  .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
  .composer { position: sticky; bottom: 0; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
  #f-chat { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 6px; box-shadow: var(--hi); transition: border-color .15s, box-shadow .2s; }
  #f-chat:focus-within { border-color: var(--accent-text); box-shadow: var(--hi), var(--glow); }
  #f-chat textarea { border: 0; background: none; box-shadow: none; resize: none; min-height: clamp(52px, 3.2vw, 64px); max-height: 200px; padding: 13px 14px; font-size: clamp(16.5px, 0.85vw, 19px); }
  #f-chat textarea:focus-visible { box-shadow: none; }
  .composer .hint { margin: 8px 2px 0; max-width: 820px; }
  @keyframes entra { from { opacity: 0; transform: translateY(4px); } }
  @keyframes punto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
  @media (max-width: 720px) { .msg.user { max-width: 92%; } }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* El icono hereda tamaño y color del texto, como hacia la fuente de iconos. */
  .ico { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -0.125em; }
  .ph-cat { width: 1.25em; height: 1.25em; vertical-align: -0.25em; margin-right: 6px; color: var(--muted); }
  td.cat .ph-cat { font-size: 16px; }

  /* Inicio: el producto se entiende viendo un armado real, al lado del formulario. */
  .armado-hoy { min-width: 0; }
  .armado-hoy > h2 { margin: 0 0 6px; font-size: 20px; }
  .armado-hoy > .hint { margin: 0 0 14px; }

  /* Reparto del presupuesto: una barra partida por pieza, de la mas cara a la mas barata */
  .reparto-barra { display: flex; height: 14px; gap: 2px; border-radius: var(--r-sm); overflow: hidden; }
  /* Escala de medicion (fig. D): la barra se lee como un instrumento, no como adorno. */
  .reparto-escala { display: flex; justify-content: space-between; margin-top: 5px; font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
  .reparto-escala span { position: relative; padding-top: 6px; }
  .reparto-escala span::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 4px; background: var(--line-2); }
  .reparto-escala span:last-child::before { left: auto; right: 0; }
  .reparto-barra i { min-width: 3px; background: var(--s8); }
  .reparto-barra i:nth-child(1) { background: var(--accent); } .reparto-barra i:nth-child(2) { background: var(--s2); } .reparto-barra i:nth-child(3) { background: var(--s3); } .reparto-barra i:nth-child(4) { background: var(--s4); }
  .reparto-barra i:nth-child(5) { background: var(--s5); } .reparto-barra i:nth-child(6) { background: var(--s6); } .reparto-barra i:nth-child(7) { background: var(--s7); }
  .reparto-leyenda { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 20px; font-size: 13.5px; color: var(--ink-2); }
  .reparto-leyenda li { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .reparto-leyenda li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--s8); }
  .reparto-leyenda li:nth-child(1)::before { background: var(--accent); } .reparto-leyenda li:nth-child(2)::before { background: var(--s2); } .reparto-leyenda li:nth-child(3)::before { background: var(--s3); } .reparto-leyenda li:nth-child(4)::before { background: var(--s4); }
  .reparto-leyenda li:nth-child(5)::before { background: var(--s5); } .reparto-leyenda li:nth-child(6)::before { background: var(--s6); } .reparto-leyenda li:nth-child(7)::before { background: var(--s7); }
  .reparto-leyenda b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); }
  .reparto { display: block; margin: 16px 0 6px; }
  .porque { margin: 14px 0 0; color: var(--ink-2); }
  .explica { margin: 14px 0 4px; }
  .explica-cargando { margin: 8px 0 0; }
  .explica .aparece { animation: iaAparece 320ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes iaAparece { from { opacity: 0; transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) { .explica .aparece { animation: none; } }
  .explica-rot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; padding-top: 12px; border-top: 2px solid var(--accent); }
  .explica-rot small { font-size: 13px; color: var(--muted); }
  .explica-res { margin: 0 0 12px; max-width: 62ch; color: var(--ink); }
  .explica-piezas { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 62ch); gap: 8px 20px; margin: 0; }
  .explica-piezas dt { font-size: 13.5px; font-weight: 600; color: var(--ink); padding-top: 1px; }
  .explica-piezas dd { margin: 0; color: var(--ink-2); }
  .explica-antes { margin: 14px 0 0; padding: 10px 14px; background: var(--surface); border-left: 2px solid var(--line-2); max-width: 76ch; }
  .explica-antes ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); }
  .explica-antes li + li { margin-top: 4px; }
  @media (max-width: 719px) { .explica-piezas { grid-template-columns: 1fr; gap: 2px; } .explica-piezas dd { margin-bottom: 8px; } }
  /* Rendimiento en juegos del armado (puntajes DF Gaming): la placa sola contra lo que le deja el procesador,
     misma escala que "Qué cambia". Renglón de datos en cifras tabulares; la leyenda siempre visible. */
  .rend { margin: 16px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); max-width: 76ch; }
  .rend-t { margin: 0 0 8px; }
  .rend-t .muted { font-size: 13px; }
  .rend-barras.cambios { font-size: 13.5px; gap: 8px; margin: 0 0 8px; }
  .rend-barras li { grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .rend-barras .cb i { height: 8px; }
  .rend-dato { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .rend-leyenda { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
  .rend-corto { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
  @media (max-width: 519px) { .rend-barras li { grid-template-columns: 1fr auto; } .rend-barras li > span:first-child { grid-column: 1 / -1; } }
  .inicio.sin-armado { grid-template-columns: minmax(0, 760px); }
  summary .reparto { flex-basis: 100%; margin: 10px 0 0; }
  summary .reparto-barra { height: 5px; }
  [data-resalta] .reparto-barra i:not(.resalta), [data-resalta] .reparto-leyenda li:not(.resalta) { opacity: .35; }
  .reparto-barra i, .reparto-leyenda li { transition: opacity .15s; }
  [data-resalta] .piezas tr.resalta { background: var(--accent-soft); }
  .regla-linea i { transition: transform .15s; }
  .regla-linea i:hover { transform: scale(1.35); z-index: 2; }

  /* Tarjetas de producto: catálogo, similares, el chat. La foto va en la
     góndola: un fondo claro parejo donde el blanco de cada tienda se funde
     (multiply), así las fotos de seis tiendas distintas se ven de una misma vidriera. */
  .grilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 36px 22px; }
  .prod { min-width: 0; display: grid; align-content: start; }
  .prod > a { display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--ink); min-width: 0; }
  .gondola { display: block; background: var(--foto); border-radius: var(--r-md); aspect-ratio: 5 / 4; overflow: hidden; margin-bottom: 10px; }
  /* En la grilla, la foto se apoya en el filo del estante; al pasar, el filo se prende como el
     cartel de precio de la góndola. */
  .prod .gondola { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 3px solid var(--line-2); transition: border-color .2s var(--ease); }
  .prod > a:hover .gondola, .prod > a:focus-visible .gondola { border-bottom-color: var(--accent); }
  .gondola .foto { width: 100%; height: 100%; padding: 9%; background: transparent; mix-blend-mode: multiply; border-radius: 0; object-fit: contain; transition: transform .35s var(--ease); }
  .gondola .foto.vacia { mix-blend-mode: normal; }
  .prod > a:hover .gondola .foto { transform: scale(1.03); }
  .prod .rotulo { font-size: 12.5px; }
  .prod .nom { font-size: 14.5px; font-weight: 500; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .prod > a:hover .nom { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .prod .precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
  .prod .precio .p { font-size: 23px; line-height: 1.1; }
  /* La variación es un dato, no un cartel: chico, al lado del precio. */
  .prod .precio > span:not(.p) { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .prod .precio .baja { color: var(--ok); } .prod .precio .sube { color: var(--bad); }
  /* El cambio lleva su curva: cómo llegó a ese precio, en el ancho de una palabra. */
  .prod .precio > span:not(.p) { display: inline-flex; align-items: center; gap: 5px; }
  .prod .precio .minicurva polyline { stroke-width: 1.4; }
  .prod small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
  /* Comparar: vive en la tarjeta, sin barra flotante ni modo aparte. */
  .comparar-con { justify-self: start; margin-top: 6px; padding: 6px 0; font-size: 13px; font-weight: 500; border: 0; background: none; cursor: pointer; font-family: inherit; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .comparar-con:hover { color: var(--ink); text-decoration-color: currentColor; }
  .comparar-con[aria-pressed="true"] { color: var(--accent-text); text-decoration: none; font-weight: 600; }
  .comparar-con[aria-pressed="true"]::before { content: "✓ "; }
  .grilla.cargando > li { display: grid; gap: 10px; }
  .grilla.cargando > li::before, .grilla.cargando > li::after { content: ""; display: block; background: linear-gradient(90deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: brillo 1.4s ease-in-out infinite; border-radius: var(--r-lg); }
  .grilla.cargando > li::before { aspect-ratio: 5 / 4; }
  .grilla.cargando > li::after { height: 64px; border-radius: var(--r-md); }
  .grilla > .empty { grid-column: 1 / -1; max-width: 62ch; }
  .grilla > .empty b { display: block; color: var(--ink); margin-bottom: 2px; }
  @media (max-width: 560px) { .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } .prod .precio .p { font-size: 19px; } .gondola .foto { padding: 7%; } }
  .msg .grilla { margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 16px; }
  .msg .grilla .precio .p { font-size: 18px; }
  .error-box.vacio { border-left-color: var(--line-hover); background: var(--surface); }
  .error-box.vacio strong { color: var(--ink); }
  .noexiste { max-width: 720px; padding-top: clamp(16px, 6vh, 64px); }
  .noexiste .otros-caminos { margin-top: 28px; }
  .noexiste .otros-caminos li { font-size: 16px; }

  /* Catalogo: buscador, categorias y orden */
  .buscar { position: relative; display: block; max-width: 640px; }
  .buscar .ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted); pointer-events: none; }
  .buscar input { padding-left: 48px; font-size: 17px; min-height: 56px; border-radius: var(--r-lg); border-color: var(--line-2); }
  .mas { display: flex; justify-content: center; margin-top: 40px; }
  /* El asistente aparece donde hace falta, con lo que estás mirando puesto. */
  .ia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 12px 16px; margin: 0 0 20px; font-size: 14px; color: var(--ink-2); }
  .ia b { color: var(--ink); font-weight: 500; }
  .ia.resultado { margin: 0 0 24px; }
  .ia button { border: 0; background: none; padding: 0; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
  .ia button:hover { color: var(--accent-text); }
  .sug-prod .preguntar-ia { padding: 12px 8px; font-size: 14px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; cursor: pointer; }
  .sug-prod .preguntar-ia:hover, .sug-prod [aria-selected="true"].preguntar-ia { background: var(--surface-2); }

  /* Pagina de producto */
  .volver { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; padding: 6px 0; margin-bottom: 20px; }
  .volver:hover { color: var(--ink); }
  .miga { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
  .miga a { text-decoration: none; }
  .prod-cab { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
  .prod-cab .gondola { aspect-ratio: 1; margin: 0; border-radius: var(--r-lg); }
  .prod-cab .gondola .foto { padding: 8%; }
  .prod-cab h1 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; margin: 8px 0 20px; overflow-wrap: anywhere; }
  .prod-precio .p { display: block; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; }
  .prod-precio > span:not(.p) { display: block; margin-top: 10px; color: var(--ink-2); }
  /* Regla de tiendas: el precio de hoy de cada una, de la más barata a la más cara. */
  .regla { margin: 22px 0 6px; max-width: 520px; }
  .regla p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); }
  .regla-linea { position: relative; height: 14px; }
  .regla-linea::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line-2); }
  .regla-linea i { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--muted); }
  .regla-linea i.barata { background: var(--accent); border-color: var(--accent); z-index: 1; }
  .regla-puntas { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .regla-puntas b { color: var(--ink-2); font-weight: 500; }
  /* Cuotas: lo que se paga de más, rayado, al lado del contado con tarjeta. */
  .cuotas-vis { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); max-width: 520px; }
  .cuotas-vis p { margin: 0 0 8px; }
  .cuotas-vis.si { color: var(--ok); }
  .recargo { display: block; height: 8px; border-radius: 2px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--bad) 0 3px, transparent 3px 7px); opacity: .9; }
  .recargo i { display: block; height: 100%; background: var(--ink-2); }
  .prod-cab .tend, .prod-cab .cuotas { font-size: 14px; margin-top: 10px; }
  .prod-cab .acciones { margin-top: 24px; }
  .prod-cab .seguir { margin: 0; font-size: 14px; }
  .prod-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
  .prod-datos > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
  .prod-datos dt { font-size: 12.5px; color: var(--muted); }
  .prod-datos dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
  @media (max-width: 860px) { .prod-cab { grid-template-columns: minmax(0, 1fr); gap: 24px; } .prod-cab > .foto { max-width: 420px; justify-self: center; } }
  @media (max-width: 480px) { .prod-datos dd { font-size: 15px; } .prod-datos > div + div { padding-left: 10px; } }
  /* Arriba de 1500px la lista de precios y el historial van lado a lado: se comparan de una. */
  @media (min-width: 1500px) {
    .producto-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
    .producto-2col > * { max-width: none; }
    .producto-2col h2 { margin-top: 0; }
  }
  .tabla-precios { padding: 4px 20px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%); border-top: 4px solid var(--accent); }
  .tabla-tiendas td { vertical-align: middle; padding: 16px 10px; }
  .tabla-tiendas td:first-child { font-weight: 700; padding-left: 0; }
  .tabla-tiendas td:last-child { padding-right: 0; text-align: right; }
  .tabla-tiendas .num { font-size: 18px; }
  .solo-una { margin: 0 0 12px; border-left: 1px solid var(--line-2); padding-left: 10px; }
  .tabla-tiendas .mas-barata { margin-left: 10px; font-weight: 600; font-size: 12px; color: var(--accent-ink); background: var(--accent); padding: 2px 7px; border-radius: var(--r-sm); vertical-align: 1px; white-space: nowrap; }
  .tabla-tiendas tr.sin td { color: var(--muted); }
  .tabla-tiendas .btn { min-height: 40px; }
  @media (max-width: 640px) {
    .tabla-tiendas, .tabla-tiendas tbody { display: block; }
    .tabla-tiendas tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; }
    .tabla-tiendas tbody tr + tr { border-top: 1px solid var(--line); }
    .tabla-tiendas td { display: block; padding: 0; border: 0 !important; }
    .tabla-tiendas td:nth-child(3) { grid-column: 1 / -1; font-size: 13px; }
    .tabla-tiendas td:last-child { grid-column: 1 / -1; text-align: left; margin-top: 8px; }
    .tabla-tiendas td:last-child .btn { width: 100%; }
  }
  .specs-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; margin: 0; }
  .specs-lista > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
  .specs-lista dt { color: var(--muted); }
  .specs-lista dd { margin: 0; font-weight: 500; text-align: right; }
  .grafico { position: relative; touch-action: pan-y; }
  .grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
  /* Los numeros del eje son datos: van en la mono de la marca, como el resto. */
  .grafico svg text { font-family: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .04em; }
  .grafico svg:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 6px; border-radius: 4px; }
  .grafico .zona { fill: url(#zona-g); }
  .grafico #zona-g stop { stop-color: var(--accent); }
  .grafico .minimo circle { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; }
  .grafico .minimo text { fill: var(--accent-text); font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
  /* Las líneas se dibujan de izquierda a derecha cuando llegan los datos. */
  @media (prefers-reduced-motion: no-preference) {
    .grafico .trazo { stroke-dasharray: 1; animation: trazar .9s ease-out both; }
    .grafico .zona, .grafico .minimo, .grafico circle:not(.minimo circle) { animation: aparecer .4s .7s ease-out both; }
    @keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes aparecer { from { opacity: 0; } }
  }
  .grafico .punta { position: absolute; top: 0; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 8px 10px; font-size: 12.5px; box-shadow: var(--float); white-space: nowrap; }
  .grafico .punta b { display: block; margin-bottom: 2px; }
  .grafico .punta span { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
  .grafico .leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin-top: 12px; }
  .grafico i.linea { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; flex: none; }

  /* Buscar desde cualquier pantalla: el panel baja del encabezado y muestra los primeros resultados. */
  .buscar-rapido { border-top: 1px solid var(--line); background: var(--surface); }
  .buscar-rapido-in { max-width: var(--ancho); margin: 0 auto; padding: 16px var(--borde) 20px; }
  .buscar-rapido .buscar { max-width: none; }
  .sug-prod { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
  .sug-prod li + li { border-top: 1px solid var(--line); }
  .sug-prod a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 8px; text-decoration: none; color: var(--ink); }
  .sug-prod a:hover, .sug-prod [aria-selected="true"] a { background: var(--surface-2); }
  .sug-prod .nom { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sug-prod small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
  .sug-prod .num { grid-row: span 2; font-weight: 700; font-variant-numeric: tabular-nums; }
  .sug-prod .todos { padding: 12px 8px; font-size: 14px; color: var(--ink-2); }
  .sug-prod .vacio { padding: 14px 8px; color: var(--muted); font-size: 14px; }
  @media (max-width: 720px) { .buscar-rapido-in { padding: 12px 16px 16px; } .sug-prod .nom { white-space: normal; } }

  /* Los resultados se leen en renglones: más de 1240px no se escanea, se recorre con la cabeza.
     Las grillas de productos sí usan todo el ancho, porque ahí el ancho suma columnas. */
  #out-armar, #out-upgrade, .prod-cab, .tabla-precios, .specs-lista, .grafico, #tab-producto > div > h2 + .scroll, .bajas > .hint, #seguidos { max-width: var(--medida); }

  /* Buscador: columna de filtros con cuántos quedarían en cada opción */
  .buscador-top { display: grid; gap: 16px; margin-bottom: 28px; }
  .con-filtros { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start; }
  .filtros-col { position: sticky; top: calc(var(--top-h) + 24px); max-height: calc(var(--alto) - var(--top-h) - 48px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 0 12px; margin-left: -12px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s; }
  .filtros-col:hover, .filtros-col:focus-within { scrollbar-color: var(--line-2) transparent; }
  .filtros-pie { display: none; }
  .filtros-cab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .filtros-cab .cerrar-x { display: none; }
  .grupo-filtro { border-top: 1px solid var(--line); padding: 16px 0 18px; }
  .grupo-filtro:first-child { border-top: 0; padding-top: 0; }
  .grupo-filtro h3 { font-weight: 500; font-size: 12.5px; line-height: 1.4; color: var(--muted); margin: 0 0 12px; }
  /* Los filtros de más abajo, plegados: el título es el botón, con la flecha de los desplegables del sitio. */
  .grupo-filtro.plegable { border-bottom: 0; }
  .grupo-filtro.plegable > summary { padding: 0 28px 0 0; flex-wrap: nowrap; align-items: center; border-radius: 0; }
  .grupo-filtro.plegable > summary:hover { background: none; }
  .grupo-filtro.plegable > summary::after { right: 6px; top: 4px; }
  .grupo-filtro.plegable > summary h3 { margin: 0; }
  .grupo-filtro.plegable > summary:hover h3 { color: var(--ink-2); }
  .grupo-filtro.plegable[open] > summary { margin-bottom: 12px; }
  .grupo-filtro.plegable > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  /* Una lista para escanear: la fila entera es el objetivo, el número queda a la derecha
     y lo elegido se marca con el filete lima, sin círculos de formulario. */
  .opts { display: grid; gap: 0; }
  .opts label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: var(--ink-2); padding: 7px 10px 7px 12px; margin: 0 -10px 0 -12px; border-radius: var(--r-sm); cursor: pointer; min-height: 36px; transition: background-color .15s var(--ease), color .15s var(--ease); }
  .opts label:hover { color: var(--ink); background: var(--surface); }
  .opts input { position: absolute; opacity: 0; pointer-events: none; }
  .opts label:has(input:checked) { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .opts label:has(input:checked) .ph-cat { color: var(--accent-text); }
  .opts label:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 1px; }
  .opts .ph-cat { margin: 0; font-size: 16px; }
  .opts .n { margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .opts label:has(input:checked) .n { color: var(--ink-2); }
  .opts .sub { margin: 14px 0 2px; font-size: 12px; font-weight: 500; color: var(--muted); }
  .opts label:has(input[type="checkbox"])::before { content: ""; width: 16px; height: 16px; flex: none; border: 1.5px solid var(--line-2); border-radius: 5px; transition: background-color .15s, border-color .15s; }
  .opts label:has(input[type="checkbox"]:checked)::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--surface); }
  .opts .ver-mas { justify-self: start; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 0; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
  .opts .ver-mas:hover { color: var(--ink); }
  .rango { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .rango input { min-height: 44px; padding: 10px 12px; font-size: 14.5px; }
  /* Cuántos productos hay a cada precio: tocar una barra filtra ese tramo. */
  .histo { display: grid; grid-template-columns: repeat(20, 1fr); align-items: end; gap: 2px; height: 56px; margin-bottom: 4px; }
  .histo button { height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; }
  .histo button:disabled { cursor: default; }
  .histo i { display: block; width: 100%; height: 100%; background: var(--line-2); clip-path: inset(calc(100% - max(var(--h), 2px)) 0 0 0 round 2px 2px 0 0); transition: background-color .15s, clip-path .3s ease-out; }
  .histo button.dentro i { background: var(--accent); }
  .histo button:not(:disabled):hover i { background: var(--ink-2); }
  .histo button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
  .histo-eje { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

  .cat-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .cat-barra .hint { margin: 0; }
  .cat-barra .orden { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; font-size: 13.5px; color: var(--muted); width: auto; }
  .cat-barra .orden select { min-height: 40px; padding: 8px 12px; font-size: 14px; width: auto; }
  .solo-mobile { display: none; }
  .activos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .activos:empty { display: none; }
  .activos button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--ink); border-radius: var(--r-md); padding: 6px 10px; font: inherit; font-size: 13.5px; cursor: pointer; min-height: 36px; }
  .activos button:hover { border-color: var(--accent-text); }
  .activos button .ico { font-size: 14px; color: var(--muted); }
  .activos .limpiar { border-color: var(--line-2); background: none; color: var(--muted); }
  .activos .limpiar:hover { color: var(--ink); }
  @media (max-width: 900px) {
    .con-filtros { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .solo-mobile { display: inline-flex; }
    .filtros-col { position: fixed; inset: 0; z-index: 25; max-height: none; background: var(--bg); padding: 0 16px max(16px, env(safe-area-inset-bottom)); display: none; }
    .filtros-col.abierta { display: block; }
    .filtros-cab { width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg); padding: 16px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; z-index: 1; }
    .filtros-cab h2 { margin: 0; font-size: 20px; }
    .filtros-cab .cerrar-x { position: static; display: grid; }
    .filtros-pie { display: block; position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
    .filtros-pie .btn { width: 100%; }
    .opts label { min-height: 44px; }
    .cat-barra .orden { width: 100%; margin-left: 0; }
    .cat-barra .orden select { flex: 1; }
  }

  /* Información breve: se lee como texto, fuera de los formularios y el catálogo. */
  .pagina-info { max-width: 720px; margin: clamp(24px, 5vh, 72px) auto 0; }
  .pagina-info h2 { margin-top: 36px; }
  .pagina-info p { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
  .pagina-info .lead { font-size: 18px; }
  .pagina-info a { color: var(--accent-text); overflow-wrap: anywhere; }
  .pagina-info code { font-family: "JetBrains Mono Variable", ui-monospace, monospace; font-size: .9em; }
  .requisitos-tienda { padding-left: 22px; color: var(--ink-2); line-height: 1.6; }
  .requisitos-tienda li + li { margin-top: 8px; }
  .solicitud-tienda { display: grid; gap: 18px; margin: 24px 0 32px; }
  .solicitud-tienda label { display: grid; gap: 7px; font-weight: 600; }
  .solicitud-tienda input, .solicitud-tienda textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--campo); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; }
  .solicitud-tienda .btn { justify-self: start; }
  .solicitud-tienda .hint { margin: -8px 0 0; font-size: 13px; }

  /* Sumá tu tienda: las tiendas que ya comparamos y el lugar de la tuya; pasos, requisitos y el formulario al costado. */
  .tienda-pag { max-width: 1100px; }
  .tienda-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line-2); }
  .tienda-hero .lead { max-width: 46ch; margin-bottom: 0; }
  .tienda-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .tienda-lista li { padding: 10px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); font-weight: 600; font-size: 15px; }
  .tienda-lista li.tuya { background: transparent; border: 2px dashed var(--accent); color: var(--accent-text); }
  .tienda-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .tienda-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 18px; }
  .tienda-pasos li { counter-increment: paso; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; }
  .tienda-pasos li::before { content: counter(paso); grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink); font-family: "JetBrains Mono Variable", ui-monospace, monospace; font-weight: 700; font-size: 20px; }
  .tienda-pasos b { font-size: 18px; }
  .tienda-pasos span { color: var(--ink-2); line-height: 1.55; }
  .tienda-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .tienda-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink-2); line-height: 1.55; }
  .tienda-check .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--accent-text); }
  .tienda-form { position: sticky; top: 96px; margin-top: 36px; padding: 28px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg, 12px); }
  .tienda-form h2 { margin: 0 0 4px; }
  .tienda-form input, .tienda-form textarea { background: var(--bg); }
  .sumar-cta { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
  .sumar-cta a { color: var(--accent-text); font-weight: 600; }
  .pie-sumar { display: inline-block; margin-top: 10px; color: var(--accent-text); font-weight: 600; text-decoration: none; }
  .pie-sumar:hover { text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 860px) {
    .tienda-hero, .tienda-cols { grid-template-columns: 1fr; gap: 24px; }
    .tienda-form { position: static; margin-top: 8px; padding: 22px; }
  }
  /* El pie: la marca y cómo contactarnos a la izquierda (lo que más se busca), después dónde ir,
     y abajo el aviso de los precios. Tablero, filetes y renglones: nada de tarjetas. */
  .pie { border-top: 1px solid var(--line-2); margin-top: 96px; background: var(--surface); }
  .pie-in { max-width: var(--ancho); margin: 0 auto; padding: 48px var(--borde) 40px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px 48px; font-size: 14px; color: var(--muted); }
  .pie p { margin: 0; max-width: 62ch; }
  .pie-marca .brand { margin-bottom: 16px; }
  .pie-marca > p { color: var(--ink-2); line-height: 1.55; max-width: 44ch; }
  .pie-marca #pie-desde { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
  .pie-contacto { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 460px; }
  .pie-contacto li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
  .pie-contacto a { flex: 1; min-width: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 56px; padding: 8px 4px; color: var(--ink); text-decoration: none; }
  .pie-contacto a > .ico { font-size: 22px; color: var(--accent-text); }
  .pie-contacto b { display: block; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
  .pie-contacto small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
  .pie-contacto .sale { font-size: 16px; color: var(--muted); transition: transform .18s cubic-bezier(.2,.7,.2,1), color .18s; }
  .pie-contacto a:hover b { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
  .pie-contacto a:hover .sale { color: var(--accent-text); transform: translate(2px, -2px); }
  .pie-copiar { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: none; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .18s, color .18s; }
  .pie-copiar:hover { border-color: var(--line-hover); color: var(--ink); }
  .pie-copiar[data-copiado] { border-color: var(--accent-text); color: var(--accent-text); }
  .pie-t { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0; }
  .pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .pie-col a { color: var(--ink-2); text-decoration: none; }
  .pie-col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
  .pie-tiendas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); }
  .pie-base { max-width: var(--ancho); margin: 0 auto; padding: 18px var(--borde) 32px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-size: 13px; color: var(--muted); }
  .pie-base p { margin: 0; }
  @media (max-width: 1024px) { .pie-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pie-marca { grid-column: 1 / -1; } }
  @media (max-width: 720px) {
    .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding: 36px 16px 28px; }
    .pie-contacto { max-width: none; }
    .pie-col a, .pie-tiendas li { min-height: 32px; display: flex; align-items: center; }
    .pie-base { padding: 16px 16px 28px; }
  }
  .aviso-cookies { position: fixed; z-index: 25; bottom: 16px; left: 16px; right: 16px; max-width: 680px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 16px 24px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--float); }
  .aviso-cookies p { margin: 0; color: var(--ink-2); font-size: 14px; }
  .aviso-cookies > div { display: flex; gap: 8px; flex: none; }
  .aviso-cookies .btn { min-height: 40px; }
  @media (max-width: 720px) { .aviso-cookies { bottom: 8px; left: 8px; right: 8px; display: block; } .aviso-cookies > div { margin-top: 14px; } .aviso-cookies .btn { flex: 1; } }

  /* Cambio de pantalla: lo nuevo sube apenas mientras lo viejo se va; el encabezado queda quieto. */
  ::view-transition-old(root) { animation: .16s var(--ease) both vt-sale; }
  ::view-transition-new(root) { animation: .24s var(--ease) both vt-entra; }
  @keyframes vt-sale { to { opacity: 0; } }
  @keyframes vt-entra { from { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }