/** Shopify CDN: Minification failed

Line 121:0 Unexpected "<"

**/
:root{
  --ground:#F3F5F8;--ground-2:#E7EBF1;--surface:#FFFFFF;--surface-2:#F7F9FB;
  --line:#DAE1EA;--line-strong:#B7C2D1;--ink:#101A33;--ink-2:#3C4863;--muted:#657088;
  --accent:#DD0B18;--accent-ink:#FFFFFF;--accent-soft:#FBE1DF;--signal:#B58200;--ok:#1E7A4B;
  --dark:#1B2F5E;--dark-ink:#F5F7FB;--dark-line:#324577;
  --radius:2px;--radius-lg:4px;--maxw:1280px;--gut:clamp(16px,4vw,40px);
  --shadow:0 18px 44px -30px rgba(10,16,35,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1220;--ground-2:#090C16;--surface:#151B2E;--surface-2:#1B2236;
    --line:#28304A;--line-strong:#3D4768;--ink:#F0F2F7;--ink-2:#C7CCDA;--muted:#8992A8;
    --accent:#FF4D4D;--accent-ink:#1A0C05;--accent-soft:#38141A;--signal:#E8B33A;--ok:#4FBE86;
    --dark:#0A1226;--dark-ink:#F5F7FB;--dark-line:#242E4E;
    --shadow:0 18px 44px -30px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0E1220;--ground-2:#090C16;--surface:#151B2E;--surface-2:#1B2236;
  --line:#28304A;--line-strong:#3D4768;--ink:#F0F2F7;--ink-2:#C7CCDA;--muted:#8992A8;
  --accent:#FF4D4D;--accent-ink:#1A0C05;--accent-soft:#38141A;--signal:#E8B33A;--ok:#4FBE86;
  --dark:#0A1226;--dark-ink:#F5F7FB;--dark-line:#242E4E;
  --shadow:0 18px 44px -30px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3,.heroh,.storeh{font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;margin:0;line-height:.96}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

.demoband{background:#DD0B18;color:#FFFFFF;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px 0;overflow:hidden;white-space:nowrap}
.demoband-track{display:inline-flex;width:max-content;animation:demoband-scroll 22s linear infinite}
.demoband-item{padding:0 28px;flex:0 0 auto}
/* La "placa" entra por la izquierda y avanza hacia la derecha, en bucle sin cortes: el truco es
   que hay DOS copias idénticas del mismo anuncio seguidas, y la animación recorre exactamente la
   mitad del ancho total (-50% -> 0) — al llegar al final, lo que se ve es idéntico a como
   empezó, así que el reinicio del bucle no se nota. */
@keyframes demoband-scroll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.demoband:hover .demoband-track{animation-play-state:paused}

/* header — la barra del logo se queda blanca siempre, sin importar el tema claro/oscuro del sitio */
header.site{position:sticky;top:0;z-index:60;background:#FFFFFF;border-bottom:1px solid #E3E7EE}
header.site .bar{display:flex;align-items:center;gap:clamp(10px,2vw,28px);min-height:66px}
.logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.logo .logoimg{height:34px;width:auto;display:block;transition:opacity .15s}
.logo .sub{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#657088}
nav.main{display:flex;gap:2px;margin-inline-start:auto}
nav.main button,nav.main a{position:relative;padding:21px 14px;background:none;border:0;border-bottom:3px solid transparent;font-size:14px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#657088;transition:color .15s,border-color .15s;text-decoration:none;display:inline-block;cursor:pointer;font-family:inherit}
nav.main button:hover,nav.main a:hover{color:#101A33}
nav.main button.on,nav.main a.on{color:#101A33;border-bottom-color:var(--accent)}
.headtools{display:flex;align-items:center;gap:8px;margin-inline-start:10px}
.icobtn{width:40px;height:40px;display:grid;place-items:center;background:transparent;border:1px solid #E3E7EE;border-radius:var(--radius);position:relative;color:#101A33}
.icobtn:hover{border-color:#B7C2D1}
.icobtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.cartcount{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 4px;background:var(--accent);color:var(--accent-ink);border-radius:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;display:grid;place-items:center;font-weight:600;font-style:normal}
.mininav{display:none;gap:6px;padding:0 var(--gut) 10px;overflow-x:auto}
.mininav button,.mininav a{flex:0 0 auto;padding:8px 14px;border:1px solid var(--line);background:var(--surface-2);border-radius:100px;font-size:13px;font-weight:700;text-transform:uppercase;text-decoration:none;color:var(--ink);cursor:pointer;font-family:inherit;white-space:nowrap}
.mininav button.on,.mininav a.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
@media (max-width:960px){nav.main{display:none}.mininav{display:flex}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border:0;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:14px;transition:filter .12s,transform .12s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.wa{background:#1FA855;color:#fff}
.btn.sm{height:40px;padding:0 16px;font-size:12.5px}

/* vistas */
.view{display:none;animation:fade .35s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
section{padding-block:clamp(40px,5.5vw,72px)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.sechead h2{font-size:clamp(26px,3.6vw,40px)}
.sechead p{margin:8px 0 0;color:var(--muted);max-width:62ch;font-size:15px}
.seclink{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px;background:none;border-top:0;border-inline:0}

/* hero */
.hero{position:relative;background:var(--dark);color:var(--dark-ink);overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero .glow{position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 10%,rgba(221,11,24,.25),transparent 58%),linear-gradient(180deg,rgba(10,18,38,.1) 0%,rgba(10,18,38,.85) 74%,var(--dark) 100%)}
.hero .wrap{position:relative;padding-block:clamp(44px,6vw,76px) clamp(28px,4vw,44px)}
.hero h1{font-size:clamp(38px,8vw,88px);letter-spacing:-.005em;overflow-wrap:break-word}
.hero h1 .thin{-webkit-text-stroke:1.5px var(--dark-ink);color:transparent;display:inline-block}
.hero .lede{margin:18px 0 0;font-size:clamp(15px,1.5vw,18px);color:#C3CBE0;max-width:56ch}
.kicker{display:inline-flex;align-items:center;gap:9px;background:rgba(221,11,24,.16);border:1px solid rgba(221,11,24,.45);color:#FF9B93;padding:6px 12px;border-radius:100px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(221,11,24,.6)}70%{box-shadow:0 0 0 9px rgba(221,11,24,0)}100%{box-shadow:0 0 0 0 rgba(221,11,24,0)}}
.spinwheel{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:min(46vw,520px);opacity:.5;pointer-events:none;animation:spin 24s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.heroflex{position:relative;display:flex;align-items:center;gap:30px}

/* finder */
.finder{position:relative;margin-top:clamp(26px,3.5vw,40px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.finder .tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.finder .tabs button{flex:1 1 auto;min-width:148px;padding:15px 16px;background:transparent;border:0;border-bottom:3px solid transparent;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap}
.finder .tabs button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.finder .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);background:var(--surface-2)}
.panel{display:none;padding:clamp(18px,2.2vw,24px)}
.panel[data-open]{display:block}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));align-items:end}
.field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field select,.field input{width:100%;height:50px;padding:0 12px;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font-family:"IBM Plex Mono",monospace;font-size:15px;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select:focus,.field input:focus{border-color:var(--accent)}
.helper{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.helper a,.helper button.link{color:var(--accent);text-decoration:underline;background:none;border:0;padding:0}
@media (max-width:560px){.fields{grid-template-columns:repeat(2,1fr)}.fields > .btn{grid-column:1/-1}}
</style>
<style>
/* segmentos */
.segments{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.seg{position:relative;display:block;min-height:280px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;transition:border-color .2s,transform .2s;text-align:left;width:100%}
.seg:hover{border-color:var(--accent);transform:translateY(-3px)}
/* La llanta de fondo de cada tarjeta de segmento es la MISMA imagen real que gira en el hero
   (llanta-spin-auto/camioneta/moto), no un dibujo plano, y gira con la misma animacion.
   Ojo con el hover: el giro es una animacion sobre `transform`, y una animacion le gana a
   cualquier `transform` normal. Por eso el hover NO usa transform sino la propiedad
   independiente `scale`, que se compone con el giro en vez de pelearse con el. */
.seg .segbg{position:absolute;right:-46px;bottom:-56px;width:230px;height:230px;object-fit:contain;
  opacity:.5;pointer-events:none;animation:girollanta 26s linear infinite;
  transition:opacity .35s ease,scale .4s ease}
.seg:hover .segbg{opacity:.72;scale:1.06}
@keyframes girollanta{to{transform:rotate(360deg)}}
/* Quien pidio menos movimiento en su sistema no ve nada girando: ni aqui ni en el hero. */
@media (prefers-reduced-motion:reduce){
  .seg .segbg,.spinwheel{animation:none}
}
.seg h3{font-size:27px;margin-top:6px;position:relative}
.seg p{position:relative;color:var(--muted);font-size:14px;max-width:26ch;margin:8px 0 0}
.seg .go{position:absolute;left:24px;bottom:22px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.seg .tagline{position:relative;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.seg.moto{background:linear-gradient(155deg,var(--accent-soft),var(--surface) 62%)}

/* marcas */
.brandrow{display:flex;gap:10px;flex-wrap:wrap}
/* Los chips de marca se quedan SIEMPRE en fondo blanco / texto oscuro, sin importar modo
   claro u oscuro del sitio: los logos de marca vienen coloreados para verse sobre blanco
   (muchos son oscuros o de un solo color), así que si el chip se pone oscuro en modo noche
   el logo se vuelve invisible. Por eso aquí NO se usan las variables --surface/--ink (que sí
   cambian con el tema) sino colores fijos. */
.brandchip{display:flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid #DAE1EA;background:#FFFFFF;border-radius:100px;font-family:Anton,sans-serif;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:#101A33;transition:all .18s}
.brandchip small{font-family:"IBM Plex Mono",monospace;font-size:11px;color:#657088;letter-spacing:0}
.brandchip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.brandchip.on{background:#101A33;color:#FFFFFF;border-color:#101A33}
.brandchip.on small{color:#FFFFFF;opacity:.7}
.brandchip.haslogo{padding:8px 18px}
/* Si el chip seleccionado (.on) además trae logo, no se invierte a fondo oscuro — el logo se
   quedaría invisible igual que en modo oscuro. Se marca "seleccionado" con el borde en vez del
   fondo. */
.brandchip.haslogo.on{background:#FFFFFF;color:#101A33;border-color:#101A33;border-width:2px}
.brandchip img{height:20px;width:auto;max-width:96px;object-fit:contain;display:block;filter:none}
.brandchip .txt{line-height:1}

/* catálogo */
.catalog{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start}
@media (max-width:900px){.catalog{grid-template-columns:1fr}}
/* La barra se queda pegada al hacer scroll, PERO con tope de altura y scroll propio:
   sin ese tope, una barra más alta que la ventana se pega por arriba y sus últimos
   filtros quedan fuera de alcance hasta que bajas todo el catálogo. Los grupos
   colapsables (abajo) son la solución de fondo; esto es la red de seguridad. */
.filters{position:sticky;top:82px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);padding:18px}

/* ===== CELULAR: los filtros dejan de ser una pared y pasan a ser una hoja =========
   El problema medido: en un iPhone de 390x780 la columna de filtros medía 1,040 px
   ABIERTA y 356 px cerrada. O sea que quien entraba al catálogo veía una pantalla
   completa (o dos) de filtros antes de la primera llanta. En una tienda, lo primero
   que tiene que verse es el producto; el filtro es una herramienta que se pide, no
   un peaje que se cobra.
   La solución es la que usa cualquier tienda seria en celular: un botón "Filtros"
   con el número de filtros puestos, y una hoja que sube desde abajo. El marcado NO
   cambia — es el mismo <aside class="filters">, sólo que en pantalla angosta se
   coloca fijo, se le da alto máximo y se esconde con transform. En escritorio todo
   sigue exactamente igual que antes. */
.filtbtn{display:none}
.fsheet-head,.fsheet-foot,.fsheet-grab{display:none}

@media (max-width:900px){
  .filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:97;
    width:auto;max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
    border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;
    background:var(--surface);padding:0 16px;box-shadow:var(--shadow);
    transform:translateY(102%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    visibility:hidden}
  .filters.on{transform:none;visibility:visible}

  /* la rayita de agarre, para que se lea como hoja y no como pantalla nueva */
  .fsheet-grab{display:block;width:38px;height:4px;border-radius:3px;background:var(--line-strong);
    margin:9px auto 0;flex:0 0 auto}

  .fsheet-head{display:flex;position:sticky;top:0;z-index:3;background:var(--surface);
    align-items:center;gap:10px;padding:10px 0 11px;border-bottom:1px solid var(--line)}
  .fsheet-head b{flex:1;font-size:17px}
  .fsheet-x{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
    background:var(--surface);color:var(--ink);font-size:19px;line-height:1;flex:0 0 auto}

  .fsheet-foot{display:block;position:sticky;bottom:0;z-index:3;background:var(--surface);
    padding:12px 0 16px;border-top:1px solid var(--line);margin-top:8px}
  .fsheet-foot .btn{width:100%}

  /* el "Limpiar filtros" del final estorba: ya está arriba, fijo, en la cabecera */
  .fgroup.plain{display:none}

  /* el botón que abre la hoja */
  .filtbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius);
    background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;font-weight:700}
  .filtbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
  .filtbtn .cnt{min-width:19px;height:19px;padding:0 5px;border-radius:10px;
    background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;
    font-size:11px;font-weight:700}
  .filtbtn .cnt[hidden]{display:none}

}
.fgroup{padding-block:12px;border-top:1px solid var(--line)}
.fgroup:first-of-type{border-top:0;padding-top:0}
.fgroup > summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:2px 0}
.fgroup > summary::-webkit-details-marker{display:none}
.fgroup > summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:auto;margin-top:-3px;transition:transform .18s;flex:0 0 auto}
.fgroup[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
.fgroup > summary:hover{color:var(--ink)}
.fgroup .cnt{font-style:normal;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:10px;letter-spacing:0}
/* Sin esta línea el globito se veía SIEMPRE, vacío y rojo, aunque el grupo no tuviera
   ningún filtro puesto. El JS ya hacía `i.hidden = true`, pero `[hidden]` del navegador
   es `display:none` con peso casi nulo, y la regla de arriba (`.fgroup .cnt`, dos clases)
   le ganaba con su `display:grid`. Regla general: si le pones `display` a algo que
   alguna vez vas a ocultar con `hidden`, tienes que apagarlo tú mismo. */
.fgroup .cnt[hidden]{display:none}
.fgroup > summary + *{margin-top:10px}
.fgroup.plain{padding-bottom:0}
.fsearch{width:100%;height:34px;padding:0 10px;margin-bottom:9px;border:1px solid var(--line);border-radius:2px;background:var(--surface-2);color:var(--ink);font-size:13px;font-family:inherit}
.checks{display:grid;gap:8px;max-height:230px;overflow-y:auto;overscroll-behavior:contain}
.check{display:flex;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.check input{appearance:none;width:17px;height:17px;border:1.5px solid var(--line-strong);border-radius:2px;flex:0 0 auto;position:relative;cursor:pointer}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check span.n{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  /* En celular la lista de marcas ya no vive en su propia cajita con scroll interno
     (eso obligaba a hacer scroll "dentro" de un cuadrito chiquito, con el dedo, sin
     poder seguir bajando la página normal desde ahí) — se deja crecer con la página,
     un solo scroll, como espera cualquier persona en el celular. Esta regla va
     DESPUÉS de la definición base de .checks a propósito: en CSS, con el mismo peso
     de selector, gana la que aparece más abajo en el archivo. */
  .checks{max-height:none;overflow:visible}
  .check{min-height:34px;font-size:15px}
  .check input{width:20px;height:20px}
}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{padding:6px 12px;border:1px solid var(--line);background:var(--surface-2);border-radius:100px;font-family:"IBM Plex Mono",monospace;font-size:12px;transition:all .15s}
.pill:hover{border-color:var(--line-strong)}
.pill.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rangebox{display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--accent)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.resultcount{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted)}
.resultcount b{color:var(--ink);font-size:15px}
.toolbar .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* OJO: esta caja se llamaba .searchbox igual que la del panel de la lupa. Como el CSS
   de la lupa vive MÁS ABAJO en el archivo, le ganaba a ésta y el campo del catálogo
   heredaba el padding de las dos: en celular el placeholder salía cortado
   ("Busca modelo, medid") dentro de una caja de 232 px. Ahora se llama .tbsearch y
   cada una responde sólo a su propio CSS. */
.tbsearch{position:relative}
.tbsearch input{height:40px;padding:0 14px 0 34px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font-size:14px;color:var(--ink);width:min(230px,52vw)}
.tbsearch svg{position:absolute;left:10px;top:11px;width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:1.8}
select.sort{height:40px;padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--radius);font-size:13.5px}
.activefilters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.tagf{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:100px;font-size:12px;font-weight:600}
.tagf button{background:none;border:0;color:inherit;line-height:1;font-size:15px;padding:0}

.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;animation:pop .3s ease both}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.card .shot{position:relative;aspect-ratio:1;background:var(--surface-2);display:grid;place-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.card .shot svg{width:76%;height:76%;transition:transform .5s ease}
.card:hover .shot svg{transform:rotate(90deg)}
.badge{position:absolute;top:9px;left:9px;background:var(--ink);color:var(--ground);font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:2px;z-index:2}
.badge.hot{background:var(--accent);color:var(--accent-ink)}
.card .body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .brand{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .name{font-weight:700;font-size:14.5px;line-height:1.3}
.card .size{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink-2)}
.card .price{margin-top:auto;display:flex;align-items:baseline;gap:8px;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.card .price b{font-size:20px;font-weight:600}
.card .add{margin-top:9px;height:40px;width:100%;border:1px solid var(--ink);background:transparent;border-radius:var(--radius);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;transition:background .15s,color .15s}
.card .add:hover{background:var(--ink);color:var(--ground)}
.card .add.done{background:var(--ok);border-color:var(--ok);color:#fff}
.stock{font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:6px}
.stock i{width:6px;height:6px;border-radius:50%;background:currentColor}
.stock.low{color:var(--signal)}
#homeTop{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.empty{padding:60px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-lg)}

/* carrito drawer */
.scrim{position:fixed;inset:0;background:rgba(10,8,7,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);background:var(--surface);border-left:1px solid var(--line);z-index:95;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}
.drawer header h3{font-size:20px}
.drawer .items{flex:1;overflow-y:auto;padding:8px 18px}
.litem{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.litem .th{background:var(--surface-2);border:1px solid var(--line);border-radius:2px;display:grid;place-items:center;aspect-ratio:1}
.litem .th svg{width:80%;height:80%}
.litem .n{font-size:13.5px;font-weight:600;line-height:1.3}
.litem .s{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.qty button{width:24px;height:24px;border:1px solid var(--line);background:var(--surface-2);border-radius:2px;display:grid;place-items:center;font-size:14px;line-height:1}
.qty span{font-family:"IBM Plex Mono",monospace;font-size:13px;min-width:16px;text-align:center}
.litem .p{font-family:"IBM Plex Mono",monospace;font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
/* OJO: más abajo hay un selector de etiqueta `footer{background:var(--dark)...}` para el pie
   de página del sitio. Ese selector también alcanza al <footer> del carrito, así que aquí hay
   que declarar explícitamente fondo y color, si no el carrito se pinta azul marino. */
.drawer footer{padding:18px;border-top:1px solid var(--line);display:grid;gap:12px;background:var(--surface);color:var(--ink);border-top-width:1px;border-top-style:solid;border-top-color:var(--line)}
.totrow{display:flex;justify-content:space-between;gap:14px;font-family:"IBM Plex Mono",monospace;font-size:14px}
.totrow span:last-child{text-align:right;white-space:nowrap}
#cartInst{font-size:12px;color:var(--muted);white-space:normal;max-width:150px;line-height:1.3}
.apartado{font-size:11.5px;line-height:1.45;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:2px;padding:9px 11px}
.apartado b{color:var(--ink)}
.totrow.big{font-size:20px;font-weight:600}

/* servicios / cotizador */
.quoter{display:grid;grid-template-columns:1.25fr .75fr;gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
@media (max-width:900px){.quoter{grid-template-columns:1fr}}
.qmain{padding:clamp(20px,2.6vw,30px);display:grid;gap:24px}
.qstep{display:grid;gap:12px}
.qstep .lbl{display:flex;align-items:center;gap:10px}
.qstep .lbl i{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:11px;font-style:normal;font-weight:600}
.qstep .lbl h3{font-size:17px}
.optrow{display:flex;gap:10px;flex-wrap:wrap}
.opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 18px;min-width:104px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-lg);font-size:13px;font-weight:600;transition:all .16s}
.opt svg{width:34px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.opt:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.opt.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.svcopts{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.svcopt{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-lg);text-align:left;transition:all .16s}
.svcopt:hover{border-color:var(--line-strong)}
.svcopt.on{border-color:var(--accent);background:var(--accent-soft)}
.svcopt .box{width:19px;height:19px;border:1.5px solid var(--line-strong);border-radius:3px;flex:0 0 auto;position:relative}
.svcopt.on .box{background:var(--accent);border-color:var(--accent)}
.svcopt.on .box::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.svcopt .t{display:flex;flex-direction:column}
.svcopt .t b{font-size:14px}
.svcopt .t span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.stepper{justify-self:start;width:max-content;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stepper button{width:46px;height:46px;background:var(--surface-2);border:0;font-size:19px}
.stepper button:hover{background:var(--accent);color:var(--accent-ink)}
.stepper span{width:56px;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:18px;font-variant-numeric:tabular-nums}
.days{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.day{flex:0 0 auto;width:70px;padding:10px 0;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-lg);text-align:center;transition:all .16s}
.day b{display:block;font-family:"IBM Plex Mono",monospace;font-size:19px;line-height:1.1}
.day span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.day.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.day.on span{color:var(--ground);opacity:.75}
.day:disabled{opacity:.35;cursor:not-allowed}
.hours{display:flex;gap:7px;flex-wrap:wrap}
.hour{padding:8px 13px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);font-family:"IBM Plex Mono",monospace;font-size:13px;transition:all .16s}
.hour.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.qside{background:var(--dark);color:var(--dark-ink);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:16px}
.qside h3{font-size:20px}
.qlines{display:grid;gap:10px;font-size:14px}
.qline{display:flex;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--dark-line);color:#C7CCE3}
.qline b{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--dark-ink);white-space:nowrap}
.qtotal{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;border-top:2px solid var(--accent)}
.qtotal span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8E97B8}
.qtotal b{font-family:Anton,sans-serif;font-size:38px;line-height:1;font-variant-numeric:tabular-nums}
.qmeta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#8E97B8;display:grid;gap:5px}
.qtime{margin-top:6px;padding:12px 14px;border:1px dashed var(--dark-line);border-radius:var(--radius-lg);font-size:13px;color:#C7CCE3}
.qtime b{font-family:"IBM Plex Mono",monospace;color:var(--accent)}

/* pasos, servicios cards, sucursal, faq, footer */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.step{background:var(--surface);padding:22px 20px 24px}
.step .num{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);letter-spacing:.1em}
.step h3{font-size:18px;margin-top:11px}
.step p{color:var(--muted);font-size:14px;margin:8px 0 0}
.store{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
@media (max-width:820px){.store{grid-template-columns:1fr}}
.store .info{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:18px}
.store h2,.store .storeh{font-size:clamp(26px,3.4vw,36px)}
.store dl{margin:0;display:grid;gap:12px}
.store dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.store dd{margin:3px 0 0;font-size:15px}
.map{position:relative;background:var(--ground-2);min-height:300px;border-left:1px solid var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02)}
details{border-bottom:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;padding:17px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:"IBM Plex Mono",monospace;font-size:22px;color:var(--accent);line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0 4px 18px;color:var(--ink-2);max-width:78ch;font-size:15px}
footer{background:var(--dark);color:#C7CCE3;border-top:3px solid var(--accent)}
footer .cols{display:grid;gap:30px 26px;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;padding-block:clamp(36px,5vw,58px)}
@media (max-width:900px){footer .cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h4{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7C86A8;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px}
footer a:hover,footer button:hover{color:var(--accent)}
footer button{background:none;border:0;padding:0;text-align:left;font-size:14px}
footer .brandblock .footerlogo{height:36px;width:auto;display:block;margin-bottom:4px}
footer .brandblock p{font-size:14px;max-width:34ch;color:#9FA8C4}
.domains{display:grid;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#7C86A8;margin-top:16px}
.domains span{display:flex;gap:8px;flex-wrap:wrap}
.domains b{color:#C7CCE3;font-weight:500}
.legal{border-top:1px solid var(--dark-line);padding-block:16px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7C86A8}
.wafloat{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:10px;background:#1FA855;color:#fff;padding:13px 18px;border-radius:100px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);font-weight:700;font-size:14px}
.wafloat svg{width:20px;height:20px;fill:currentColor}
@media (max-width:560px){.wafloat{right:12px;bottom:12px;padding:11px 14px;font-size:13px}}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--ground);padding:12px 20px;border-radius:100px;font-size:14px;font-weight:600;z-index:100;opacity:0;pointer-events:none;transition:all .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.trust{border-block:1px solid var(--line);background:var(--surface-2)}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line)}
.trustitem{background:var(--surface-2);padding:20px 18px;display:flex;gap:13px;align-items:flex-start}
.trustitem svg{width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.5;flex:0 0 auto}
.trustitem b{display:block;font-size:14.5px}
.trustitem span{font-size:12.5px;color:var(--muted)}
.delivery{display:grid;gap:8px;margin-bottom:12px}
.delivery .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.delivery button{padding:11px 10px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.delivery button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.delivery .cp{display:flex;gap:8px}
.delivery .cp input{flex:1;height:42px;padding:0 12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:var(--radius);font-family:"IBM Plex Mono",monospace;font-size:14px}
.shipnote{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.shipnote.free{color:var(--ok);font-weight:600}
.paygrid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.paycard{border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:9px}
.paycard svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.5}
.paycard h3{font-size:17px}
.paycard p{margin:0;font-size:14px;color:var(--muted)}
.paycard ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink-2);display:grid;gap:5px}
.ziptable{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.ziptable th,.ziptable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.ziptable th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ziptable td:last-child,.ziptable th:last-child{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--surface-2);font-size:13px;color:var(--muted);margin-bottom:18px}
.note b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}
  /* Con animaciones desactivadas por accesibilidad, la pista del anuncio se queda quieta —
     hay que esconder la copia duplicada para que no se vea el mismo texto dos veces seguidas. */
  .demoband-track{transform:none}
  .demoband-item:nth-child(2){display:none}
}

/* ===== FICHA DE PRODUCTO — vista completa =====
   Se abre desde cualquier tarjeta del catálogo. Es una ventana y no una página
   /products/… mientras los productos no estén publicados al canal Tienda en línea
   (esa ruta daría 404 hoy). Cuando se publiquen, este mismo marcado se reusa tal cual
   en la plantilla Liquid de producto. */
.card{cursor:pointer}
.card .shot{position:relative;overflow:hidden}
.card .cardfoto{width:100%;height:100%;object-fit:contain;display:block;transition:transform .35s}
.card:hover .cardfoto{transform:scale(1.05)}
.card .verdet{position:absolute;left:0;right:0;bottom:0;padding:7px 0;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:rgba(16,26,51,.82);color:#fff;opacity:0;transition:opacity .18s}
.card:hover .verdet,.card:focus-within .verdet{opacity:1}

.pdmodal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.985);width:min(1080px,96vw);max-height:92vh;overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-lg);z-index:96;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:var(--shadow)}
.pdmodal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.pdclose{position:sticky;float:right;top:12px;right:12px;margin:12px 12px 0 0;z-index:3;background:var(--surface)}
.pdbody{padding:22px clamp(18px,2.6vw,32px) 32px}

/* ---- bloque superior: galería + columna de compra ---- */
.pdtop{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,38px);align-items:start}
@media (max-width:820px){.pdtop{grid-template-columns:1fr}}
.pdgal{position:sticky;top:0}
@media (max-width:820px){.pdgal{position:static}}
.pdmain{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg);display:grid;place-items:center;overflow:hidden}
.pdmain img{width:100%;height:100%;object-fit:contain;display:block}
.pdmain.nofoto{gap:10px;color:var(--muted)}
.pdmain.nofoto svg{width:52%;height:52%;opacity:.5}
.pdmain.nofoto span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.pdthumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pdthumb{width:64px;height:64px;padding:0;background:var(--surface-2);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:border-color .15s}
.pdthumb.on{border-color:var(--accent);border-width:2px}
.pdthumb img{width:100%;height:100%;object-fit:contain;display:block}

.pdbuycol{display:grid;gap:0;align-content:start}
.pdbrand{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pdbuycol h3{font-size:clamp(22px,2.9vw,31px);margin:5px 0 3px;padding-right:40px}
.pdsize{font-family:"IBM Plex Mono",monospace;font-size:16px;color:var(--accent)}
.pdrate{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;color:var(--muted);width:fit-content;border-bottom:1px solid transparent}
.pdrate:hover{border-bottom-color:var(--line-strong)}
.pdrate b{color:var(--ink);font-family:"IBM Plex Mono",monospace}
.stars{color:#E8A317;letter-spacing:1px;font-size:14px;line-height:1}
.star{opacity:.28}
.star.full{opacity:1}
.star.half{opacity:.6}
.pdprice{margin:18px 0 4px}
.pdprice b{font-family:"IBM Plex Mono",monospace;font-size:clamp(30px,4vw,40px);line-height:1;display:block}
.pdprice span{font-size:12.5px;color:var(--muted)}
.pdstock{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ok);margin-top:10px}
.pdstock i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pdstock.low{color:var(--signal)}
.pdactions{display:grid;gap:9px;margin-top:20px}
.pdperks{list-style:none;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.pdperks li{font-size:13px;line-height:1.45;color:var(--muted);padding-left:20px;position:relative}
.pdperks li::before{content:"◆";position:absolute;left:0;color:var(--accent);font-size:9px;top:4px}
.pdperks b{color:var(--ink);font-weight:600}

/* ---- secciones de abajo ---- */
.pdsec{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.pdsec h4{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:18px;margin:0 0 14px}
.pdlede{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.pdnote{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.pdnote a{border-bottom:1px solid var(--line-strong)}
/* outline en vez de gap+fondo: las celdas que sobran en la última fila no quedan como
   huecos grises, pero cada dato conserva su recuadro. */
.pdspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.pdspecs div{padding:11px 13px;outline:1px solid var(--line)}
.pdspecs dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pdspecs dd{margin:3px 0 0;font-size:14px;font-weight:600;word-break:break-word}
.pdchips{display:flex;flex-wrap:wrap;gap:7px}
.pdchip{padding:5px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:100px;font-size:12.5px}

/* ---- reputación real del taller (Google) ---- */
.pdrevhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg)}
.pdrevhead .big{font-family:Anton,sans-serif;font-size:38px;line-height:1;margin-right:10px;vertical-align:middle}
.pdrevhead .n{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.pdrevlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px}
.pdrevlist blockquote{margin:0;padding:14px 16px;border:1px solid var(--line);border-left:3px solid #E8A317;border-radius:2px;background:var(--surface)}
.pdrevlist p{margin:8px 0 10px;font-size:13.5px;line-height:1.5}
.pdrevlist cite{font-style:normal;font-size:11.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}

/* ---- relacionados ---- */
.pdrels{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.pdrel{display:grid;gap:2px;padding:10px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color .15s,transform .15s}
.pdrel:hover{border-color:var(--accent);transform:translateY(-2px)}
.pdrel .th{aspect-ratio:1;background:var(--surface-2);border-radius:2px;display:grid;place-items:center;overflow:hidden;margin-bottom:7px}
.pdrel .th img{width:100%;height:100%;object-fit:contain}
.pdrel .th svg{width:78%;height:78%}
.pdrel .b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pdrel .n{font-size:13px;font-weight:600;line-height:1.25}
.pdrel .s{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.pdrel .p{font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;margin-top:4px}
/* Las fotos rescatadas vienen sobre fondo blanco de estudio. Si el recuadro de la tarjeta
   se queda gris (o azul marino en modo oscuro) se ve un cuadro blanco flotando dentro de
   otro color. Cuando hay foto real, el recuadro se pone blanco fijo — mismo criterio que
   los chips de marca. */
.card .shot.hasfoto{background:#FFFFFF}
.pdmain:has(img){background:#FFFFFF}
.pdthumb:has(img),.pdrel .th:has(img){background:#FFFFFF}

/* ===== PORTADAS DE SECCIÓN (Moto / Auto) =====
   Cada sección abre en portada y el catálogo con filtros aparece al buscar. */
.secland[hidden],.seccat[hidden]{display:none}
.backland{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:9px 15px;background:var(--surface);border:1px solid var(--line);border-radius:100px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.05em;color:var(--muted);transition:all .15s}
.backland:hover{border-color:var(--accent);color:var(--accent)}

/* banda de promociones */
.promoband{background:var(--dark);color:var(--dark-ink);border-block:1px solid var(--dark-line)}
.promos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;padding-block:0}
.promo{padding:22px clamp(14px,2vw,26px);border-left:1px solid var(--dark-line)}
.promo:first-child{border-left:0;padding-left:0}
@media (max-width:760px){.promo{border-left:0;border-top:1px solid var(--dark-line);padding-inline:0}.promo:first-child{border-top:0}}
.promo b{display:block;font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:17px;margin-bottom:5px}
.promo span{font-size:13px;line-height:1.45;color:#B9C2D8}

/* rejilla de ofertas: mismas tarjetas del catálogo, en fila horizontal con scroll en móvil */
.grid.ofertas{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.card .price s{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted);margin-right:6px;font-weight:400}
.pdprice .antes{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.pdprice .antes s{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--muted)}
.pdprice .antes em{font-style:normal;background:var(--accent);color:var(--accent-ink);font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;padding:2px 7px;border-radius:2px}

/* tipos de uso */
.usogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.usocard{display:grid;justify-items:center;gap:3px;padding:22px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);transition:all .18s}
.usocard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.usocard svg{width:52px;height:52px;margin-bottom:8px;opacity:.9}
.usocard b{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:16px}
.usocard span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}

/* guías / preguntas frecuentes de portada */
.guias{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.guia{padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-lg)}
.guia h3{font-size:16px;margin:0 0 8px}
.guia p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* ===== promociones de par — carrusel =====
   El desplazamiento es scroll-snap nativo: en celular ya se desliza con el dedo sin código
   táctil propio, y se siente como el sistema operativo en vez de como una librería. El ancho
   de cada tarjeta se define con flex-basis en vw, no con un número fijo de columnas, para que
   en celular se vea UNA tarjeta completa y se asome la siguiente — que es la señal visual de
   "hay más, deslízame" sin necesidad de explicarlo. */
.carousel{position:relative}
.cartrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.cartrack::-webkit-scrollbar{display:none}
.cartrack > *{scroll-snap-align:start;flex:0 0 calc((100% - 48px) / 4)}
@media (max-width:1180px){.cartrack > *{flex-basis:calc((100% - 32px) / 3)}}
@media (max-width:900px){.cartrack > *{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:620px){
  /* Una tarjeta completa + un asomo de la siguiente. El padding lateral negativo deja que
     el carrusel sangre hasta el borde de la pantalla, que es como se ve bien en celular. */
  .carousel{margin-inline:calc(var(--gut) * -1)}
  .cartrack{padding-inline:var(--gut);gap:12px;scroll-padding-inline:var(--gut)}
  .cartrack > *{flex-basis:82%}
}
.carousel.sinnav .carnav,.carousel.sinnav .cardots{display:none}

.carnav{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:2;width:42px;height:42px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:50%;box-shadow:var(--shadow);transition:all .15s}
.carnav:hover{border-color:var(--accent);color:var(--accent)}
.carnav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carnav.prev{left:-14px}
.carnav.next{right:-14px}
@media (max-width:900px){.carnav{display:none}}   /* en celular se desliza con el dedo */

.cardots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.cardots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line-strong);opacity:.55;transition:all .2s}
.cardots button.on{opacity:1;background:var(--accent);width:22px;border-radius:4px}
@media (max-width:620px){.cardots{margin-top:14px}.cardots button{width:9px;height:9px}.cardots button.on{width:24px}}

.promocard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .18s,box-shadow .18s}
.promocard:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.promoimg{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#0B0F1C}
.promoimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.promocard:hover .promoimg img{transform:scale(1.03)}
.promoahorro{position:absolute;top:0;right:0;background:var(--accent);color:#fff;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:6px 11px;border-bottom-left-radius:var(--radius-lg)}
.promobody{padding:15px 16px 16px;display:grid;gap:2px;flex:1;align-content:start}
.promomarca{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.promobody h3{font-size:17px;margin:3px 0 1px}
.promomedidas{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent);word-break:break-word}
.promoprecio{display:flex;align-items:baseline;gap:8px;margin-top:9px;flex-wrap:wrap}
.promoprecio b{font-family:"IBM Plex Mono",monospace;font-size:24px;line-height:1}
.promoprecio span{font-size:11.5px;color:var(--muted)}
.promosuelto{font-size:11.5px;color:var(--muted)}
.promosuelto s{font-family:"IBM Plex Mono",monospace}
.promoacc{display:grid;gap:7px;margin-top:auto;padding-top:13px}
.promoacc .btn{width:100%}


/* ===== BLOG (consejos y guías) =====
   Vive en el blog nativo de Shopify a propósito: así cada artículo tiene su URL real
   (/blogs/consejos/…), lo entrega el servidor en HTML puro y Google y los motores de IA lo
   pueden leer sin depender de JavaScript. */
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.artcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);transition:border-color .18s,transform .18s,box-shadow .18s}
.artcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.artcard a{display:grid;gap:8px;padding:22px 24px 24px}
.artcard h2{font-size:20px;line-height:1.08}
.artcard p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.arttag{display:inline-block;width:fit-content;padding:3px 10px;background:var(--accent-soft);color:var(--accent);border-radius:100px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.artmeta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}

.artread{max-width:760px;padding-block:clamp(30px,4vw,54px);display:grid;gap:12px}
.artread h1{font-size:clamp(28px,4.4vw,44px);margin-top:6px}
.artbody{margin-top:18px;font-size:16.5px;line-height:1.72;color:var(--ink-2)}
.artbody h2{font-size:clamp(21px,2.6vw,27px);margin:38px 0 12px;color:var(--ink)}
.artbody h3{font-size:18px;margin:28px 0 8px;color:var(--ink)}
.artbody p{margin:0 0 16px}
.artbody ul,.artbody ol{margin:0 0 18px;padding-left:22px}
.artbody li{margin-bottom:8px}
.artbody strong{color:var(--ink)}
.artbody a{color:var(--accent);border-bottom:1px solid currentColor}
.artbody table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;display:block;overflow-x:auto}
.artbody th,.artbody td{padding:9px 12px;border:1px solid var(--line);text-align:left}
.artbody th{background:var(--surface-2);font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
.artbody blockquote{margin:0 0 20px;padding:14px 18px;background:var(--surface-2);border-left:3px solid var(--accent);border-radius:2px;font-size:15px}
.artbody blockquote p:last-child{margin:0}

.artcta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-top:40px;padding:26px 28px;background:var(--dark);color:var(--dark-ink);border-radius:var(--radius-lg)}
.artcta h3{font-size:21px;margin:0 0 6px}
.artcta p{margin:0;font-size:14px;color:#B9C2D8;max-width:44ch}
.artctabtns{display:grid;gap:9px}
.artcta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.artcta .btn.ghost:hover{border-color:#fff;color:#fff}
.artmas{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.artmas h3{font-size:19px;margin:0 0 16px}
.artmas .artgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.artmas .artcard h2{font-size:16px}

/* ===== AJUSTES DE CELULAR (auditados con navegador real a 360, 390 y 768 px) ===== */

/* BUG encontrado en la auditoría: el artículo del blog forzaba la página a 566 px de ancho
   en un celular de 360, o sea scroll horizontal en todo el artículo. Causa: `.artread` es un
   grid, y los hijos de un grid traen `min-width:auto` de fábrica — eso les impide encogerse
   por debajo del ancho de su contenido, y la tabla de precios (que es ancha) empujaba a todo
   el bloque. `min-width:0` los deja encogerse; la tabla se queda con su propio scroll. */
.artread{max-width:min(760px, 100%)}
.artread > *{min-width:0;max-width:100%}
.artbody table{max-width:100%}
.artbody pre,.artbody code{white-space:pre-wrap;word-break:break-word}

@media (max-width:620px){
  /* Los rótulos chiquitos (11 px) se leen bien en escritorio pero en celular quedan al filo
     de lo legible — es buena parte de esa sensación de "apachurrado". Suben a 12–12.5 px y
     se les afloja el interletrado, que a tamaño chico es lo que más ayuda. */
  .eyebrow{font-size:12.5px;letter-spacing:.14em}
  .fgroup > summary{font-size:12px;letter-spacing:.12em}
  .artmeta,.promomarca,.pdbrand,.card .brand{font-size:12px;letter-spacing:.06em}
  .promosuelto,.promoprecio span,.pdnote,.guia p{font-size:13px}
  .demoband{font-size:12px}
  .logo .sub{font-size:11px;letter-spacing:.18em}

  /* Aire entre secciones: en celular todo pegado se siente amontonado aunque no se salga. */
  section{padding-block:clamp(30px,7vw,44px)}
  .sechead{margin-bottom:18px}
  .sechead h2{font-size:clamp(24px,7.4vw,32px)}
  .sechead p{font-size:14.5px}

  /* Hero: el titular gigante en pantalla angosta se come toda la primera vista. */
  .hero h1{font-size:clamp(34px,10vw,46px)}
  .hero .lede{font-size:15.5px}

  /* El buscador de la portada: un campo por renglón, con el botón de ancho completo. */
  .finder .fields{grid-template-columns:1fr;gap:12px}
  .finder .fields .btn{width:100%;margin-top:2px}
  .finder .tabs button{font-size:12.5px;padding:13px 8px}

  /* Ficha de producto: la ventana ocupa casi toda la pantalla, sin bordes desperdiciados. */
  .pdmodal{width:100%;max-width:100%;height:100%;max-height:100%;top:0;left:0;transform:none;border:0;border-radius:0}
  .pdmodal.on{transform:none}
  .pdbody{padding:16px 18px 40px}
  .pdclose{margin:10px 10px 0 0}
  .pdspecs{grid-template-columns:1fr 1fr}
  .pdrels{grid-template-columns:1fr 1fr}

  /* Carrito: ancho completo, que en 360 px un 92 % deja un borde inútil. */
  .drawer{width:100%}

  /* Artículo del blog: tipografía de lectura, no de escritorio comprimido. */
  .artread{padding-block:22px 36px}
  .artbody{font-size:16px;line-height:1.68}
  .artbody h2{font-size:21px;margin-top:30px}
  .artcta{padding:20px;text-align:left}
  .artctabtns{width:100%}
  .artctabtns .btn{width:100%}
}

@media (max-width:400px){
  /* Pantallas realmente angostas: dos columnas de tarjetas se vuelven ilegibles. */
  .grid{grid-template-columns:1fr}
  .pdspecs,.pdrels{grid-template-columns:1fr}
  .usogrid{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  /* Hallazgos de la revisión visual en celular (capturas a 390 px):

     1. El botón flotante de WhatsApp con texto tapaba el contenido a media lectura. En
        celular se queda como círculo con el ícono — sigue igual de alcanzable con el pulgar
        y deja de estorbar. El texto se conserva en escritorio, donde sí cabe. */
  .wafloat{width:56px;height:56px;padding:0;border-radius:50%;font-size:0;gap:0;justify-content:center;bottom:16px;right:16px}
  .wafloat svg{width:27px;height:27px;margin:0}

  /* 2. El banner de promoción en 4:5 se comía casi toda la pantalla y obligaba a un scroll
        larguísimo por tarjeta. En celular se recorta a cuadrado: el gancho visual se
        conserva y ninguna información se pierde, porque precio, medidas y ahorro ya están
        en texto abajo de la imagen. */
  .promoimg{aspect-ratio:1/1}
  .promobody{padding:14px 15px 15px}
  .promobody h3{font-size:18px}
  .promoprecio b{font-size:26px}

  /* 3. Los puntos del carrusel quedaban debajo del botón flotante. */
  .cardots{margin-bottom:8px}
}

/* ===== preguntas frecuentes ===== */
.faqlist{display:grid;gap:10px;max-width:820px}
.faqitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .18s}
.faqitem[open]{border-color:var(--accent)}
.faqitem > summary{list-style:none;display:flex;align-items:center;gap:14px;padding:17px 20px;cursor:pointer}
.faqitem > summary::-webkit-details-marker{display:none}
.faqitem > summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:auto;margin-top:-4px;transition:transform .2s;flex:0 0 auto}
.faqitem[open] > summary::after{transform:rotate(-135deg);margin-top:3px;border-color:var(--accent)}
.faqitem h2{font-family:"Public Sans",sans-serif;font-weight:700;text-transform:none;letter-spacing:0;font-size:16px;line-height:1.35;margin:0}
.faqans{padding:0 20px 19px;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:70ch}
.faqans p{margin:0}
@media (max-width:620px){.faqitem > summary{padding:15px 16px}.faqitem h2{font-size:15px}.faqans{padding:0 16px 17px;font-size:14px}}

/* ===== página de medidas y precios (HTML del servidor, para SEO/GEO) ===== */
.medidas h2{font-size:clamp(22px,3.2vw,32px);margin:44px 0 6px;scroll-margin-top:90px}
.medidas h2:first-of-type{margin-top:8px}
.medidas h3{font-size:17px;margin:26px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.medidas h3 .cuenta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.medidanota{font-size:14px;color:var(--muted);margin:0 0 6px;max-width:70ch}
.medidanav{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.medidanav a{padding:9px 15px;background:var(--surface);border:1px solid var(--line);border-radius:100px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;transition:all .15s}
.medidanav a:hover{border-color:var(--accent);color:var(--accent)}
.tablawrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.medidas table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.medidas th{text-align:left;padding:10px 13px;background:var(--surface-2);border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
.medidas td{padding:9px 13px;border-bottom:1px solid var(--line)}
.medidas tr:last-child td{border-bottom:0}
.medidas td.med{font-family:"IBM Plex Mono",monospace;font-weight:600;white-space:nowrap}
.medidas td.pre{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.medidas td.mar{color:var(--muted);font-size:13px}
@media (max-width:620px){
  .medidas h2{font-size:22px;margin-top:34px}
  .medidas table{font-size:13px;min-width:480px}
  .medidas td.mar{font-size:12px}
  .medidanav a{font-size:12.5px}
}

/* ===== BLOQUE 5 — escala de espaciado y tipografía =========================
   La escala vive como variables para que los estilos NUEVOS la usen y no se siga
   sembrando el sitio de valores sueltos.
   Lo que YA estaba escrito con números no se migró en masa a propósito: hay 298 usos
   fuera de la escala, y redondear 10px a 8 o 14px a 16 en 298 lugares mueve un diseño
   que ya está afinado y aprobado. El reporte con el mapeo propuesto está en el proyecto,
   para decidirlo con el sitio enfrente en vez de a ciegas. */
:root{
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px;

  /* tipografía: proporción constante 1.25 (tercera mayor) sobre 16px */
  --t--1:12.8px; --t-0:16px; --t-1:20px; --t-2:25px; --t-3:31px; --t-4:39px; --t-5:49px;
  --lh-cuerpo:1.55; --lh-titulo:1.1;
  --medida-lectura:68ch;   /* ancho máximo de línea: 65-75 caracteres */
}

/* ===== BLOQUES 11 y 12 — páginas por modelo de moto ===== */
.mdwrap{padding-block:var(--e-6) var(--e-8);max-width:860px}
.mdmigas{font-family:"IBM Plex Mono",monospace;font-size:var(--t--1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--e-4);display:flex;
  flex-wrap:wrap;gap:var(--e-2);align-items:center}
.mdmigas a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.mdmigas a:hover{color:var(--accent);border-color:currentColor}
.mdmigas b{color:var(--ink);font-weight:700}
.mdwrap h1{font-size:clamp(30px,5.2vw,var(--t-5));margin-bottom:var(--e-4)}
.mdwrap h2{font-size:var(--t-2);margin-top:var(--e-7);margin-bottom:var(--e-4)}
.mdwrap h3{font-size:var(--t-1);margin-top:var(--e-5);margin-bottom:var(--e-3)}
.mdlede{font-size:var(--t-1);line-height:1.45;max-width:var(--medida-lectura);
  color:var(--ink);border-left:3px solid var(--accent);padding-left:var(--e-4)}
.mdspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--e-3);margin:0}
.mdspecs>div{min-width:0;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--e-3) var(--e-4)}
.mdspecs dt{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--e-1)}
.mdspecs dd{margin:0;font-weight:700;font-size:var(--t-0)}
.mdopts{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e-3)}
.mdopt{min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--e-4);display:flex;flex-direction:column;gap:var(--e-1)}
.mdopt-b{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.mdopt-n{font-weight:700;font-size:var(--t-0);line-height:1.25}
.mdopt-m{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink)}
.mdopt-f{font-size:12.5px;color:var(--muted);line-height:1.4}
.mdopt-p{margin-top:var(--e-2);font-size:var(--t-1)}
.mdopt-p s{font-size:14px;color:var(--muted);margin-right:6px}
.mdopt-p b{font-size:var(--t-1)}
.mdopt-s{font-size:12.5px;color:var(--muted)}
.mdgen{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.mdfaq{border-bottom:1px solid var(--line);padding:var(--e-3) 0}
.mdfaq summary{cursor:pointer;font-weight:700;font-size:var(--t-0);list-style:none;
  display:flex;justify-content:space-between;gap:var(--e-3);align-items:flex-start}
.mdfaq summary::-webkit-details-marker{display:none}
.mdfaq summary::after{content:"+";color:var(--accent);font-weight:400;font-size:20px;line-height:1}
.mdfaq[open] summary::after{content:"−"}
.mdfaq p{margin:var(--e-3) 0 0;max-width:var(--medida-lectura);line-height:var(--lh-cuerpo);
  color:var(--muted)}
.mdnota,.mdfuente{font-size:13px;color:var(--muted);margin-top:var(--e-3);
  max-width:var(--medida-lectura)}
.mdfuente{font-size:11.5px;margin-top:var(--e-6);padding-top:var(--e-3);
  border-top:1px solid var(--line);line-height:1.5}
.mdinst{max-width:var(--medida-lectura);line-height:var(--lh-cuerpo)}
.mdacc{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-5)}
@media (max-width:600px){
  .mdwrap{padding-block:var(--e-5) var(--e-7)}
  .mdlede{font-size:var(--t-0);padding-left:var(--e-3)}
  .mdopts,.mdspecs{grid-template-columns:1fr}
  .mdacc .btn{width:100%;text-align:center}
}

/* Texto chico en celular: mismo criterio que ya se aplicó al resto del sitio en la
   auditoría móvil. Por debajo de 12px un rótulo deja de leerse cómodo en la mano, y
   estos son justo los que llevan el dato (la medida, el índice, la marca). */
@media (max-width:600px){
  .mdspecs dt{font-size:12.5px;letter-spacing:.08em}
  .mdopt-b{font-size:12px;letter-spacing:.1em}
  .mdfuente{font-size:12px;line-height:1.6}
}

/* ===== CELULAR: bloques de confianza y promesas, en rejilla compacta =====
   En celular estos dos bloques se apilaban uno debajo de otro y estiraban la página
   muchísimo — había que hacer scroll cuatro pantallas para pasarlos. En rejilla de dos
   columnas se leen igual de bien y ocupan la cuarta parte del alto.
   Se cuidó no bajar el texto de 12.5 px, que es donde empieza a costar leer en celular. */
@media (max-width:620px){
  .trust .wrap{grid-template-columns:1fr 1fr;gap:1px;padding-inline:0}
  .trustitem{flex-direction:column;gap:7px;padding:15px var(--gut);align-items:flex-start}
  .trustitem:nth-child(even){padding-inline:14px var(--gut)}
  .trustitem:nth-child(odd){padding-inline:var(--gut) 14px}
  .trustitem svg{width:22px;height:22px}
  .trustitem b{font-size:13.5px;line-height:1.25}
  .trustitem span{font-size:12.5px;line-height:1.32;display:block;margin-top:2px}

  /* Sin padding lateral en el contenedor: en celular la rejilla se ve mejor sangrando de
     borde a borde, y cada celda pone su propio margen interno. */
  .promos{grid-template-columns:1fr 1fr;gap:1px;background:var(--dark-line);padding-inline:0}
  .promo{padding:14px var(--gut) 15px;border-left:0;background:var(--dark)}
  .promo:nth-child(even){padding-inline:14px var(--gut)}
  .promo:nth-child(odd){padding-inline:var(--gut) 14px}
  .promo b{font-size:14.5px;line-height:1.12;margin-bottom:4px}
  .promo span{font-size:12.5px;line-height:1.32}
}

@media (max-width:360px){
  /* En pantallas muy angostas dos columnas ya aprietan de más: vuelve a una, pero compacta. */
  .trust .wrap,.promos{grid-template-columns:1fr}
  .trustitem{flex-direction:row;align-items:center;padding:13px 14px}
  .trustitem svg{width:20px;height:20px}
  .promo{padding:13px 14px}
}

/* ===== logos de marca en los chips de "Marcas en existencia" =====
   El logo sustituye al texto visualmente, pero el nombre sigue en el DOM dentro de .sr para
   que lo lean los lectores de pantalla y los rastreadores. Un chip con imagen y sin texto
   accesible es invisible para quien no ve la imagen — y para un bot que no carga imagenes. */
/* Caja fija en vez de altura fija. Con altura fija los logos anchos (Suzuki, Keeway) se veian
   bien y los cuadrados (el ala de Honda, el diapason de Yamaha) quedaban diminutos y sin poder
   leerse. Con max-height + max-width cada logo topa por el lado que le toca y todos acaban
   ocupando un area optica parecida. */
.brandchip .brandlogo{height:auto;width:auto;max-height:30px;max-width:112px;object-fit:contain;display:block;
  filter:grayscale(1) contrast(1.05);opacity:.72;transition:filter .18s ease,opacity .18s ease}
.brandchip.conlogo{padding-block:9px}
.brandchip.conlogo:hover .brandlogo,.brandchip.conlogo[aria-pressed="true"] .brandlogo,
.brandchip.conlogo.on .brandlogo{filter:none;opacity:1}
/* El nombre solo se esconde cuando el logo de verdad esta pintado. Va atado a .conlogo, que
   el onerror del <img> quita si la imagen no carga: asi el chip nunca se queda vacio. */
.brandchip.conlogo .txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-theme="dark"] .brandchip .brandlogo{filter:grayscale(1) brightness(1.9) contrast(.9);opacity:.8}
[data-theme="dark"] .brandchip.conlogo:hover .brandlogo{filter:brightness(1.6);opacity:1}
@media (max-width:620px){ .brandchip .brandlogo{max-height:24px;max-width:92px} }

/* ===== BUSCADOR GLOBAL (la lupa del header) =================================
   Panel que baja desde arriba, no un drawer lateral: el usuario que busca quiere
   escribir y ver resultados de inmediato, y en celular un panel superior deja el
   teclado y la lista en el mismo campo visual. */
.searchpanel{position:fixed;top:0;left:0;right:0;z-index:96;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  transform:translateY(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain}
.searchpanel.on{transform:none}
.searchinner{padding:18px var(--gut) 22px}
.searchbox{display:flex;align-items:center;gap:12px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--surface-2);padding:0 14px;height:56px}
.searchbox:focus-within{border-color:var(--accent)}
.searchbox>svg{width:20px;height:20px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:1.8}
.searchbox input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:17px;color:var(--ink)}
.searchbox input:focus{outline:0}
.searchclose{flex:0 0 auto;border:0;background:none;font:inherit;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer;padding:6px}
.searchclose:hover{color:var(--accent)}
.searchhint{margin:10px 2px 0;font-size:13px;color:var(--muted)}
.searchhint b{color:var(--ink-2);font-family:"IBM Plex Mono",monospace;font-weight:600}
.searchres{margin-top:14px;display:grid;gap:2px}
.searchgrp{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:12px 2px 4px}
.sugg{display:flex;align-items:center;gap:14px;width:100%;text-align:start;text-decoration:none;
  padding:11px 12px;border:1px solid transparent;border-radius:var(--radius);background:none;
  color:var(--ink);font:inherit;cursor:pointer}
.sugg:hover,.sugg.on{background:var(--surface-2);border-color:var(--line)}
.sugg .stxt{flex:1;min-width:0;display:grid;gap:2px}
.sugg .sname{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg .sname mark{background:var(--accent-soft);color:inherit;border-radius:3px;padding:0 1px}
.sugg .ssub{font-size:12.5px;color:var(--muted)}
.sugg .sn{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.sugg .sico{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--muted)}
.sugg .sico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.searchvacio{padding:22px 4px;color:var(--muted);font-size:15px}
.searchvacio b{color:var(--ink)}
.searchvacio .btn{margin-top:14px}
@media (max-width:700px){
  .searchbox{height:50px}
  .searchbox input{font-size:16px}   /* 16px evita que iOS haga zoom al enfocar */
  .searchinner{padding:14px var(--gut) 18px}
}
/* Con la lupa ya son TRES iconos en la barra. En pantallas muy angostas (360 px es lo
   más común en Android de gama media) hay que apretarlos un poco y soltar la palabra
   "Miramontes" del logo, o la barra se desborda. */
@media (max-width:430px){
  .headtools{gap:5px;margin-inline-start:6px}
  .icobtn{width:36px;height:36px}
  .icobtn svg{width:17px;height:17px}
  .logo .sub{display:none}
}


/* ===== barra del catálogo en celular =====================================
   Va al FINAL del archivo a propósito, y esto costó una vuelta: cuando estas
   reglas estaban arriba junto a las de la hoja de filtros, no aplicaban. Con
   el mismo peso de selector el CSS le da la razón a la que aparece más abajo
   en el archivo, y las definiciones base de `.toolbar` y `select.sort` viven
   ~40 líneas más adelante — le ganaban a la media query aunque la media query
   fuera "más específica" en lenguaje coloquial. Una @media NO añade peso.

   Se declaran fila y columna de cada pieza en vez de dejar que el grid las
   acomode solo, para que el resultado no dependa del orden del HTML (el botón
   de Filtros lo inyecta el JS y se cuela como primer hijo de .right). */
@media (max-width:900px){
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:center}
  .toolbar .right{display:contents}
  .resultcount{grid-column:1/-1;grid-row:1}
  .tbsearch{grid-column:1/-1;grid-row:2}
  .tbsearch input{width:100%;height:44px;font-size:16px}  /* 16px: iOS no hace zoom al enfocar */
  .filtbtn{grid-column:1;grid-row:3}
  select.sort{grid-column:2;grid-row:3;height:44px;width:100%}
}