/*
Theme Name: Soluciones M.A.
Theme URI: https://solucionesma.com/
Author: Soluciones M.A.
Description: Tema propio de Soluciones M.A., canal autorizado de Zebra Technologies (PartnerConnect Business Partner) en Panamá. Catálogo y cotización, sin carrito.
Version: 0.32.2
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solucionesma
Tags: business, custom-menu, custom-logo
*/

:root{
  --ground:#FFFFFF; --surface:#F6F8FA; --line:#E3E8EC;
  --blue:#0B4F8F; --blue-deep:#083A69; --cyan:#29ABE2;
  --ink-1:#16202A; --ink-2:#46545F; --ink-3:#7A8791;
  --ph-bg:#EDF1F4; --ph-ink:#8A97A0;
  --max:1180px;
  /* Hoja de papel doblada. Va de token porque la pinta `mask` con
     `currentColor`: asi el icono hereda el color del enlace y no hay que
     mantener dos SVG, uno azul y otro para el hover. */
  --ico-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4z'/%3E%3C/svg%3E");
  color-scheme:light;
  --f-display:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
  --f-ui:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* Identidad de marca: fondo blanco SIEMPRE. Sin tema oscuro a propósito. */
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink-2);
  font-family:var(--f-ui);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px}
/* Peso 700, no 600: Source Serif 4 es una variable de 200 a 900, asi que el
   navegador interpola de verdad y no fabrica una negrita falsa. A 600 los
   titulos grandes se veian delgados contra el cuerpo en Hanken Grotesk. */
h1,h2,h3{font-family:var(--f-display);color:var(--blue);text-wrap:balance;
  font-weight:700;line-height:1.12;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}

/* salto al contenido: obligatorio para teclado y lector de pantalla */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--blue);color:#fff;
  padding:12px 20px;text-decoration:none}
.skip:focus{left:0}

/* --- cabecera --- */
header.site{position:sticky;top:0;z-index:20;background:var(--ground);
  border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:32px;padding-block:14px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{display:block;height:44px;width:auto;max-width:100%}
nav.main{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;
  flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:2px;background:var(--ink-1);
  transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
nav.main a{font-size:15px;font-weight:500;color:var(--ink-1);text-decoration:none;
  padding-block:4px;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--blue);border-bottom-color:var(--cyan)}

/* Desplegable de «Catálogo». Sin JS: abre con :hover y con :focus-within, que
   es lo que lo hace alcanzable con el tabulador. El <li> pasa a `position
   relative` para anclar el panel, y el `padding-top` del panel tapa el hueco
   entre el enlace y la lista —sin él, el ratón cruza tierra de nadie, se
   pierde el hover y el desplegable se cierra a medio camino. */
nav.main li{position:relative}
nav.main .menu-item-has-children > a::after{content:"";display:inline-block;
  width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg)}
nav.main .sub-menu{position:absolute;top:100%;left:-14px;z-index:30;
  display:block;flex-direction:column;gap:0;min-width:232px;
  padding:8px 0;margin-top:10px;
  background:var(--ground);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 12px 32px rgba(8,58,105,.14);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
nav.main .sub-menu::before{content:"";position:absolute;left:0;right:0;
  top:-10px;height:10px}
nav.main .menu-item-has-children:hover > .sub-menu,
nav.main .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:none}
nav.main .sub-menu a{display:block;padding:9px 18px;border-bottom:0;
  font-size:14.5px;white-space:nowrap}
nav.main .sub-menu a:hover{color:var(--blue);background:var(--surface)}

/* --- buscador de la cabecera ---
   El orden explicito es lo que deja la lupa a la DERECHA del menu: en el
   marcado va antes de la hamburguesa (en movil las dos quedan juntas) y sin
   estos `order` se pintaria pegada al logo. */
.brand{order:1}
nav.main{order:2}
.buscar{order:3;position:relative;flex:0 0 auto}
.burger{order:4}

.buscar-abrir{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;border:0;border-radius:2px;
  background:none;color:var(--ink-1);cursor:pointer;transition:color .15s,background .15s}
.buscar-abrir:hover{color:var(--blue);background:var(--surface)}
.buscar-abrir[aria-expanded="true"]{color:var(--blue);background:var(--surface)}

/* El panel cuelga de la cabecera, que es pegajosa: sale por debajo del borde
   y no empuja nada de la pagina. */
.buscar-panel{position:absolute;top:calc(100% + 14px);right:0;z-index:30;
  width:min(420px,calc(100vw - 48px));
  background:var(--ground);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 18px 44px rgba(0,0,0,.13)}
.buscar-form{display:flex;gap:0;border-bottom:1px solid var(--line)}
.buscar-form input[type="search"]{flex:1 1 auto;min-width:0;
  border:0;background:none;padding:14px 16px;font:inherit;font-size:15.5px;color:var(--ink-1)}
.buscar-form input[type="search"]:focus{outline:2px solid var(--cyan);outline-offset:-2px}
.buscar-enviar{flex:0 0 auto;border:0;background:var(--blue);color:#fff;cursor:pointer;
  font-family:var(--f-ui);font-size:14px;font-weight:600;padding:0 18px}
.buscar-enviar:hover{background:var(--ink-1)}

/* 8 sugerencias caben sin scroll; el tope esta por si el enlace de «ver
   todos» empuja la ultima fuera en una pantalla baja. */
.buscar-res{max-height:min(58vh,430px);overflow-y:auto}
.buscar-it{display:flex;align-items:center;gap:12px;padding:10px 16px;
  text-decoration:none;border-bottom:1px solid var(--line)}
.buscar-it:last-child{border-bottom:0}
.buscar-it:hover,.buscar-it.is-on{background:var(--surface)}
.buscar-it img,.buscar-it-hueco{flex:0 0 44px;width:44px;height:44px;
  object-fit:contain;background:var(--surface);border:1px solid var(--line)}
.buscar-it-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.buscar-it-nom{font-size:15px;font-weight:600;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buscar-it-linea{font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Las secciones del catalogo: lo que se ve con el campo vacio. Se pintan mas
   apretadas que las sugerencias —no llevan foto y son cinco— para que quepan
   las cinco sin scroll dentro del panel. */
.buscar-guia-tit{margin:0;padding:12px 16px 8px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.buscar-sec{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:9px 16px;text-decoration:none;
  border-top:1px solid var(--line)}
.buscar-sec:hover,.buscar-sec.is-on{background:var(--surface)}
.buscar-sec-nom{font-size:15px;font-weight:600;color:var(--ink-1)}
.buscar-sec-n{flex:0 0 auto;font-family:var(--f-ui);font-size:12.5px;color:var(--ink-3)}
/* El pie va fuera del scroll de la lista: siempre visible, sin bajar. */
.buscar-todos{display:block;padding:12px 16px;text-align:center;
  font-family:var(--f-ui);font-size:13.5px;font-weight:600;
  color:var(--blue);text-decoration:none;border-top:1px solid var(--line)}
.buscar-todos:hover{background:var(--surface)}
/* Vacio no ocupa: sin esto queda un hueco blanco bajo el campo desde que se
   abre el panel y antes de teclear nada. */
.buscar-estado{margin:0;font-family:var(--f-ui);font-size:13.5px;color:var(--ink-3)}
.buscar-estado:not(:empty){padding:14px 16px;border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-ui);font-size:15px;font-weight:600;text-decoration:none;
  padding:11px 22px;border:1.5px solid var(--blue);border-radius:2px;
  background:var(--blue);color:#fff;transition:background .15s,color .15s;cursor:pointer}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.btn.ghost:hover{background:transparent;border-color:var(--blue);color:var(--blue)}

/* --- hero con carrusel de fondo ---
   ESCRITORIO: fotos a sangre, texto encima sobre un velo oscuro.
   MOVIL: fondo blanco y las mismas fotos a sangre DEBAJO del texto. */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:20px}
.hero-band{position:relative;isolation:isolate;overflow:hidden;background:#07203A}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-slides{position:absolute;inset:0}
/* fundido cruzado: todas apiladas, solo la activa a opacidad 1.
   El zoom lento da vida sin pedir un video. */
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;opacity:0;transform:scale(1.06);
  transition:opacity .75s ease,transform 4.6s linear}
.hero-slide.is-on{opacity:1;transform:scale(1)}
/* velo: DOS capas. La vertical va siempre —una de las tres fotos es muy clara
   y sin ella el blanco se pierde—. La lateral solo existe en escritorio, donde
   el texto se alinea a la izquierda: sin ella la mitad izquierda es la que
   necesita contraste y la derecha se oscurece de balde, tapando la foto.
   En movil el texto vuelve al centro y la lateral desaparece (ver @media). */
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,20,36,.55) 0%,rgba(4,20,36,.34) 46%,
      rgba(4,20,36,0) 74%),
    linear-gradient(180deg,rgba(4,20,36,.42) 0%,rgba(4,20,36,.30) 45%,
      rgba(4,20,36,.50) 100%)}

/* La altura se mide CONTRA LA CABECERA, no contra la ventana: la cabecera
   ocupa unos 76px por encima, así que un hero a 78vh empujaba el botón fuera
   de la primera pantalla. 68vh + cabecera cabe en 100vh, y el tope de 560px
   evita que en un monitor alto el botón se vaya al centro geométrico. */
/* ESCRITORIO: el texto se alinea a la IZQUIERDA, no al centro. Centrado, el
   bloque quedaba flotando en medio de una banda de 1200px con aire muerto a
   los dos lados y cada linea empezando en un sitio distinto. Alineado a la
   izquierda las tres lineas arrancan en la misma vertical, el ojo baja recto
   hasta el boton, y la mitad derecha se libera para que se vea la foto —que
   es justo lo que el carrusel esta pagando—. Movil vuelve al centro. */
.hero{display:grid;grid-template-columns:1fr;align-items:center;justify-items:start;
  text-align:left;padding-block:72px 76px;min-height:min(68vh,560px)}
/* el tope en `ch` es el que reparte: 15ch corta el H1 en tres lineas de peso
   parecido en vez de dos largas y una coja. Sin `max-width` la linea se iria
   a 1200px y se volveria ilegible. */
.hero h1{font-size:clamp(2.6rem,5.2vw,4rem);letter-spacing:-.02em;max-width:15ch;
  margin-inline:0;color:#fff;text-wrap:balance;
  text-shadow:0 2px 18px rgba(4,20,36,.45)}
/* el sub es mas ancho que el H1 a proposito: dos bloques con el mismo tope
   dan un rectangulo plano. Asi hay jerarquia. */
.hero .sub{margin-top:18px;font-size:18px;color:rgba(255,255,255,.92);max-width:52ch;
  margin-inline:0;text-shadow:0 1px 12px rgba(4,20,36,.5)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;justify-content:flex-start}
/* CTA azul de marca sobre el velo: el velo ya da el contraste */
.hero .btn{padding:15px 34px;font-size:16px;border-radius:999px;
  background:var(--blue);border-color:var(--blue);color:#fff}
.hero .btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.hero .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* --- franja de cifras --- */
.strip{background:var(--surface);border-block:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--surface);padding:30px 24px}
.stat dt{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.stat dd{margin:0;font-family:var(--f-display);font-size:30px;font-weight:600;
  color:var(--blue);font-variant-numeric:tabular-nums;line-height:1.1}

/* --- secciones --- */
.sec{padding-block:80px}
/* Dos secciones seguidas del mismo bloque tematico: la segunda no repite el
   respiro de arriba o se lee como si empezara un tema nuevo. */
.sec.sec-pegada{padding-top:0}
/* Fila de botones al pie de una seccion. Existia solo como `.hero .cta`, asi
   que fuera del hero se venia escribiendo a mano en el atributo `style` de
   cada plantilla: cinco copias del mismo flex que nadie podia cambiar de una
   vez. `.hero .cta` sigue mandando dentro del hero por especificidad. */
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* Parrafo que cuelga de un titulo dentro de una seccion. */
.sec-parrafo{margin-top:16px}
.fine.sec-parrafo{margin-top:20px}
.head{max-width:60ch;margin-bottom:44px}
.head h2{font-size:clamp(2.2rem,4vw,3.1rem);letter-spacing:-.015em}
.head p{margin-top:14px;font-size:17.5px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
/* La fila de familias que ya no cabe en tres: lectores, moviles, tabletas y
   tarjetas. Se declara APARTE y no se toca .grid-3, que la usan media docena
   de bloques mas. En movil manda el carrusel horizontal de abajo. */
.grid-4{grid-template-columns:repeat(4,1fr);gap:22px}
.card{position:relative;z-index:0;
  border:1px solid var(--line);border-radius:2px;background:var(--ground);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .18s ease,transform .22s cubic-bezier(.22,.7,.3,1),
    box-shadow .22s ease}
/* la card se levanta POR ENCIMA de las vecinas */
.card:hover,.card:focus-within{border-color:var(--blue);z-index:2;
  transform:translateY(-6px);
  box-shadow:0 18px 38px -14px rgba(7,32,58,.28),0 3px 10px -4px rgba(7,32,58,.16)}
/* foto real de producto: fondo claro obligatorio, el JPG de Zebra NO es transparente */
.card .shot-box{border-bottom:1px solid var(--line);background:var(--ph-bg);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  padding:14px;overflow:hidden}
.card .shot-box img{display:block;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card:hover .shot-box img{transform:scale(1.035)}
/* Cuerpo en azul macizo con texto blanco.
   El azul va SOLO aqui, nunca detras de la foto: el JPG de Zebra no es
   transparente y se recorta con mix-blend-mode:multiply, que sobre azul
   oscuro se comeria el producto. La .shot-box se queda clara a proposito. */
.card .body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;
  background:var(--blue);color:#fff}
.card h3{font-size:21px;color:#fff}
.card p{font-size:15.5px;color:rgba(255,255,255,.88)}
.card .meta{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.18)}
/* sobre azul, el borde azul del hover no se ve: se marca con la sombra */
.card:hover .body,.card:focus-within .body{background:var(--blue-deep)}
.card .body a{color:#fff}

/* foto de producto recortada: sin marco, el equipo flota sobre el fondo */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;max-width:520px;margin-inline:auto;
  mix-blend-mode:multiply}

/* selector de equipo: el resultado del test */
.panel{margin-top:40px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;
  border:1px solid var(--line);border-left:3px solid var(--blue);
  background:var(--surface);padding:34px 36px;align-items:center}
.panel h3{font-size:15px;font-family:var(--f-ui);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.panel .list{margin-top:16px}
.panel .list b{color:var(--ink-1);font-weight:600}
.panel-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.panel-cta .btn{padding:14px 28px}
.fine{font-size:14px;color:var(--ink-3)}

/* --- test del selector ---
   Una pregunta por pantalla. Las opciones son radios de verdad, solo con la
   marca redonda escondida: se pinta la tarjeta entera y el navegador sigue
   dando el teclado, el foco y los grupos por `name` sin una linea de JS. */
.test{margin-top:34px;border:1px solid var(--line);border-top:3px solid var(--blue);
  background:var(--ground);padding:32px 34px}
.test-paso{border:0;padding:0;margin:0}
.test-paso legend{font-family:var(--f-display);font-size:26px;line-height:1.25;
  color:var(--ink-1);padding:0}
.test-num{display:block;font-family:var(--f-ui);font-size:13px;font-weight:700;
  letter-spacing:.12em;color:var(--ink-3);margin-bottom:6px}
.test-ops{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.test-op{display:block;cursor:pointer}
.test-op input{position:absolute;opacity:0;width:0;height:0}
.test-op span{display:block;border:1.5px solid var(--line);border-radius:2px;
  padding:15px 18px;font-size:16px;color:var(--ink-1);background:var(--ground);
  transition:border-color .15s,background .15s}
.test-op:hover span{border-color:var(--cyan)}
/* El foco se pinta sobre el texto porque el radio real no se ve: sin esto,
   quien navega con Tab no sabe donde esta. */
.test-op input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.test-op input:checked+span{border-color:var(--blue);background:var(--surface)}
.test-atras{margin-top:20px;border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--f-ui);font-size:15px;color:var(--ink-2)}
.test-atras:hover{color:var(--blue)}

.test-out h3{font-family:var(--f-display);font-size:26px;color:var(--ink-1)}
.test-out:focus{outline:none}
.test-nota{margin-top:12px;padding:14px 16px;background:var(--surface);
  border-left:3px solid var(--cyan);font-size:15px;color:var(--ink-2)}
.test-sub{margin-top:26px;font-family:var(--f-ui);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.test-res{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.test-res li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  border:1px solid var(--line);border-radius:2px;padding:14px 18px}
.test-res a{color:var(--ink-1);text-decoration:none;border-bottom:1px solid var(--cyan)}
.test-res b{font-size:18px}
.test-linea{font-size:14px;color:var(--ink-3)}
.test-tag{margin-left:auto;font-family:var(--f-ui);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.test-cta{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.test-otra{border:0;background:none;padding:0;cursor:pointer;font-family:var(--f-ui);
  font-size:15px;color:var(--ink-2);text-decoration:underline}
.test-otra:hover{color:var(--blue)}

/* industrias */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:15px;
  font-weight:500;color:var(--ink-1);text-decoration:none;background:var(--ground)}
.tag:hover{border-color:var(--blue);color:var(--blue)}

/* como trabajamos: aqui el orden SI es informacion */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.step{counter-increment:s;padding-top:20px;border-top:2px solid var(--blue)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--f-display);
  font-size:15px;font-weight:600;color:var(--cyan);display:block;margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:15.5px}

/* suministros y servicio */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.list{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:12px}
.list li{padding-left:22px;position:relative;font-size:16.5px;color:var(--ink-2)}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  background:var(--cyan)}

/* contacto */
.contact{background:var(--surface);border-top:1px solid var(--line)}
.contact .grid-3{gap:40px}
.contact h3{font-size:15px;font-family:var(--f-ui);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
/* el `:not(.btn)` NO es adorno: `.contact a` pesa mas que `.btn` y ademas va
   despues, asi que sin el se llevaba por delante el blanco del boton y el CTA
   salia con letra casi negra sobre azul —contraste 1.99, ilegible—. Pasaba en
   «Pedir cotizacion» de Sobre nosotros y de la pagina del certificado. Misma
   cautela que ya llevaba `.quote-datos a:not(.btn)`. */
.contact a:not(.btn){color:var(--ink-1);text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:not(.btn):hover{color:var(--blue);border-bottom-color:var(--blue)}
.contact address{font-style:normal;color:var(--ink-2)}

/* --- solicitud de cotizacion ---
   Fondo BLANCO, no la foto de la referencia: sobre foto el campo de texto
   necesita un contraste que solo se consigue con recuadros blancos macizos, y
   eso deja el bloque mas pesado que todo el resto del sitio. */
.quote{background:var(--ground);border-top:1px solid var(--line)}
/* el encabezado va centrado como en la referencia; el resto del sitio no */
.quote-head{max-width:70ch;margin-inline:auto;text-align:center}
.quote-head::after{content:"";display:block;width:120px;height:3px;
  background:var(--blue);margin:22px auto 0}
.quote-head p{margin-top:20px}

/* el formulario manda: 1.35fr contra los datos, que son de consulta */
.quote-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:start}
.quote-form-box{border:1px solid var(--line);border-top:3px solid var(--blue);
  background:var(--surface);padding:34px 36px}

.quote-form .fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:7px;margin:0 0 18px}
.campo label{font-family:var(--f-ui);font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.campo label span{color:var(--blue)}
.campo input,.campo select,.campo textarea{
  font-family:var(--f-ui);font-size:16px;color:var(--ink-1);
  background:var(--ground);border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;width:100%;
  transition:border-color .15s,box-shadow .15s}
.campo textarea{resize:vertical;min-height:120px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ph-ink)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,79,143,.14)}
/* la flecha del select va en SVG embebido: sin ella el desplegable no se
   distingue de un campo de texto en Chrome con appearance:none */
.campo select{appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346545F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.quote-enviar{margin-top:22px;padding:14px 34px;font-size:16px}
.quote-form .fine{margin-bottom:0}

/* trampa antirobots: fuera de pantalla, NO display:none — hay bots que
   ignoran los campos ocultos y entonces la trampa no atrapa nada */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.aviso{padding:14px 16px;border-radius:2px;font-size:16px;margin-bottom:24px}
.aviso-ok{background:#EAF4EC;border-left:3px solid #2E7D4F;color:#1E5637}
.aviso-mal{background:#FBEDED;border-left:3px solid #B3261E;color:#7F1D18}

.quote-datos{display:flex;flex-direction:column;gap:28px}
.quote-datos h3{font-size:15px;font-family:var(--f-ui);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.quote-datos address{font-style:normal;color:var(--ink-2)}
.quote-datos a:not(.btn){color:var(--ink-1);text-decoration:none;
  border-bottom:1px solid var(--line)}
.quote-datos a:not(.btn):hover{color:var(--blue);border-bottom-color:var(--blue)}
.quote-datos .btn{margin-top:16px}

/* --- pie: mapa del sitio, contacto y redes ---
   Cuatro columnas en escritorio y DOS en móvil, no una: las listas del pie son
   cortas (cinco enlaces) y apiladas obligan a un scroll largo hasta el
   contacto, que es lo que la gente baja a buscar. La columna de marca ocupa el
   ancho entero abajo del todo porque su párrafo no cabe a media pantalla. */
footer.site{border-top:1px solid var(--line);background:var(--ground)}
.foot-map{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;padding-block:44px 32px}
.foot-marca{grid-column:1 / -1}
.foot-marca img{height:40px;width:auto}
.foot-lema{font-size:14px;color:var(--ink-2);margin-block:12px 10px;max-width:52ch}
.foot-sello a{font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-1);text-decoration:none;
  border-bottom:1px solid var(--line)}
.foot-sello a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.foot-tit{font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.foot-lista + .foot-tit,.foot-dir + .foot-tit{margin-top:24px}
.foot-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  font-size:14px;color:var(--ink-2)}
.foot-lista a{color:var(--ink-2);text-decoration:none}
.foot-lista a:hover{color:var(--blue)}
.foot-dir{font-style:normal;font-size:13px;line-height:1.6;color:var(--ink-3);margin-top:16px}
.foot-redes a{display:inline-flex;color:var(--ink-3)}
.foot-redes a:hover{color:var(--blue)}
.foot-redes svg{fill:currentColor}

/* barra inferior: la línea legal, separada del mapa */
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-block:18px;font-size:13px;color:var(--ink-3)}
/* El enlace legal hereda el gris del pie —no compite con nada— pero se subraya
   para que se vea que es un enlace y no una etiqueta más de la línea. */
.foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--blue)}

@media (min-width:900px){
  .foot-map{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
  .foot-marca{grid-column:auto}
}

/* --- contenido corriente (entradas y páginas sueltas) --- */
.entry{padding-block:64px}
.entry .wrap{max-width:72ch}
.entry h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:24px}
.entry p,.entry ul,.entry ol{margin-bottom:18px}
.entry a{color:var(--blue)}

/* --- páginas legales ---
   Una medida corta y sin columnas. Un texto legal se lee entero o no se lee:
   lo que decide si se lee es que la línea no obligue a barrer la pantalla. */
.legal{max-width:68ch}
.legal h2{margin-top:44px;font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.01em}
.legal h2:first-child{margin-top:0}
.legal h3{margin-top:28px;font-size:17px}
.legal p,.legal ul{margin-top:14px;color:var(--ink-2);line-height:1.7}
.legal ul{list-style:disc;padding-left:22px}
.legal li{margin-top:8px;color:var(--ink-2)}
.legal strong{color:var(--ink-1)}
.legal a{color:var(--blue)}
.legal-extra{margin-top:44px;border-top:1px solid var(--line);padding-top:24px}

/* --- sobre nosotros ---
   Casi todo reaprovecha .sec/.split/.stats/.contact; aquí solo van los tres
   retoques que esa página necesita y ninguna otra. */
.nos-split{align-items:start}          /* .split centra, y con dos textos de alto distinto queda torcido */
/* Fuera de .entry el tema no le da margen a <p>, y aquí hay tres seguidos:
   sin esto se leen como un ladrillo. */
.nos-split h2,.nos-split h3{margin-bottom:14px}
.nos-split p{margin-bottom:14px}
.nos-split p:last-child{margin-bottom:0}
.nos-split .list + .fine{margin-top:18px}
.nos-split h3{font-size:15px;font-family:var(--f-ui);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.nos-extra{max-width:72ch}
.nos-cta{margin-top:16px}

/* --- ficha de equipo ---
   Misma reja que una ficha de tienda: foto a la izquierda, caja de decision
   pegajosa a la derecha. Sin precio ni carrito — aqui la accion es hablar
   con ventas. */
.equipo{padding-block:40px 80px}
.migas{font-size:14px;color:var(--ink-3);margin-bottom:28px;display:flex;gap:8px;flex-wrap:wrap}
.migas a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.migas a:hover{color:var(--blue);border-bottom-color:var(--blue)}

.eq-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}

/* la foto de Zebra se recorta con multiply: el fondo TIENE que ser claro */
.eq-foto{margin:0;background:var(--ph-bg);border:1px solid var(--line);border-radius:2px;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:28px;
  overflow:hidden}
.eq-foto img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.eq-foto-vacia{background:var(--ph-bg)}
.eq-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.eq-thumb{width:72px;height:72px;padding:6px;cursor:pointer;background:var(--ph-bg);
  border:1px solid var(--line);border-radius:2px;transition:border-color .15s}
.eq-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.eq-thumb:hover{border-color:var(--blue)}
.eq-thumb.is-on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}

/* pegajosa bajo la cabecera, que mide 73px. Se apaga en movil. */
.eq-box{position:sticky;top:96px}
.eq-titulo{font-size:clamp(2rem,3.4vw,2.7rem);letter-spacing:-.015em}
.eq-lead{margin-top:16px;font-size:17.5px}
.eq-usos{margin-top:22px}
.eq-usos .tag{font-size:14px;padding:6px 14px}

/* --- selector de variante ---
   Radios de verdad debajo de la caja: el teclado y el lector de pantalla ya
   saben recorrer un grupo de radios, un div con clicks no. */
/* una opcion por fila y a ancho completo: con la aclaracion al lado las cajas
   salian de anchos distintos y la columna se veia rota */
.eq-variantes{margin:30px 0 0;padding:0;border:0;display:grid;grid-template-columns:1fr;gap:10px}
.eq-variantes legend{padding:0;margin-bottom:12px;width:100%;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.eq-var{cursor:pointer}
.eq-var input{position:absolute;opacity:0;width:0;height:0}
.eq-var-caja{display:flex;flex-direction:column;gap:2px;
  border:1.5px solid var(--line);border-radius:2px;padding:11px 18px;background:var(--ground);
  transition:border-color .15s,background .15s,color .15s}
.eq-var-nom{font-size:15.5px;font-weight:600;color:var(--ink-1)}
.eq-var-nota{font-size:13px;color:var(--ink-3)}
.eq-var:hover .eq-var-caja{border-color:var(--blue)}
.eq-var input:checked + .eq-var-caja{border-color:var(--blue);background:var(--blue)}
.eq-var input:checked + .eq-var-caja .eq-var-nom{color:#fff}
.eq-var input:checked + .eq-var-caja .eq-var-nota{color:rgba(255,255,255,.8)}
/* el foco va en la caja: el input real es invisible y no se veria el anillo */
.eq-var input:focus-visible + .eq-var-caja{outline:2px solid var(--cyan);outline-offset:3px}

.eq-cta{margin-top:32px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.eq-cta .btn{padding:15px 28px;font-size:16px;border-radius:999px}
/* verde de WhatsApp, no azul de marca: aqui el color ES el icono, dice a
   donde lleva el boton antes de leerlo */
/* No es el #25D366 de la marca ni el #1FA855 que estaba aqui: con texto
   blanco de 15px daban 2.48 y 3.09, por debajo del 4.5 que pide AA. Este
   verde da 4.71 y el de hover 6.83, y sigue leyendose como WhatsApp. */
.eq-wa{background:#16853F;border-color:#16853F}
.eq-wa:hover{background:#10682F;border-color:#10682F}
.eq-cta .fine{margin-top:6px;text-align:center}
/* Documentacion: ficha tecnica y manual. Van bajo el boton de cotizar y no
   encima: quien entra a la ficha viene a decidir, no a descargar; el PDF es
   la salida del que ya decidio. */
.eq-docs{margin-top:20px;padding:0;list-style:none;font-size:15px}
.eq-docs li + li{margin-top:8px}
.eq-docs a{color:var(--blue)}
.eq-docs a::before{content:"";display:inline-block;width:13px;height:16px;
  margin-right:8px;vertical-align:-3px;background:currentColor;
  -webkit-mask:var(--ico-doc) center/contain no-repeat;
  mask:var(--ico-doc) center/contain no-repeat}

/* Video: caja 16:9 fija ANTES de que cargue nada. Sin la proporcion
   reservada, la miniatura empuja media pagina al aparecer. */
.eq-yt{position:relative;width:100%;max-width:860px;aspect-ratio:16/9;
  overflow:hidden;border-radius:6px;background:var(--surface);
  border:1px solid var(--line)}
.eq-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.eq-yt-play{position:absolute;inset:0;width:100%;height:100%;padding:0;
  border:0;background:none;cursor:pointer;display:block}
/* La miniatura de YouTube es 4:3 con dos franjas negras: `cover` recorta las
   franjas y deja la imagen llenando el 16:9. */
.eq-yt-play img{width:100%;height:100%;object-fit:cover;display:block}
.eq-yt-icono{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;border-radius:10px;background:rgba(8,58,105,.82);
  transition:background .15s ease}
.eq-yt-icono::after{content:"";position:absolute;top:50%;left:52%;
  transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff}
.eq-yt-play:hover .eq-yt-icono,
.eq-yt-play:focus-visible .eq-yt-icono{background:var(--blue)}

.eq-sec{margin-top:72px}
.eq-sec > h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:26px}
/* dos columnas de datos: la lista de specs es larga y en una sola se estira */
.eq-specs{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.eq-spec{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.eq-spec dt{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3)}
.eq-spec dd{margin:0;color:var(--ink-1)}
.eq-texto{max-width:72ch}
.eq-texto p,.eq-texto ul,.eq-texto ol{margin-bottom:18px}
.eq-texto a{color:var(--blue)}

/* los tres bloques de la ficha en columnas. Sustituyen al texto corrido:
   quien cotiza busca un dato, no un parrafo. Panel gris para que se lean
   como una sola tabla y no como tres secciones sueltas */
.eq-bloques{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:38px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 48px}
.eq-bloques.cols-1{grid-template-columns:minmax(0,60ch)}
.eq-bloques.cols-2{grid-template-columns:repeat(2,1fr)}
.eq-col h3{font-size:1.18rem;line-height:1.3;margin-bottom:16px;color:var(--ink-1)}
.eq-lista{list-style:disc;margin:0;padding-left:20px}
.eq-lista li{margin-bottom:10px;color:var(--ink-2);line-height:1.55}
.eq-lista li:last-child{margin-bottom:0}
/* la clave no va en negrita: en una lista de doce, doce negritas no destacan
   nada. Basta con el color del texto principal */
.eq-clave{color:var(--ink-1)}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}

/* la card entera es clicable, no solo el titulo */
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}

/* --- catalogo (/equipos/, /linea/... y /servicios/) --- */
.catalogo{padding-block:40px 80px}
.cat-head{max-width:64ch;margin-bottom:30px}
.cat-head h1{font-size:clamp(2.1rem,4vw,3rem);letter-spacing:-.015em}
.cat-head p{margin-top:14px;font-size:17.5px}

/* filtro por linea: enlaces de verdad, no botones de JS */
.cat-filtro{margin-bottom:40px}
.cat-filtro .tag{display:inline-flex;align-items:center;gap:8px}
.cat-filtro .tag.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.cat-cuenta{font-size:12.5px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.cat-filtro .tag.is-on .cat-cuenta{color:rgba(255,255,255,.75)}

/* segunda fila: las familias de impresora. Se ve que dependen de la de arriba
   —van pegadas a ella, con la sangría y el tipo mas pequeno— para que nadie
   las lea como otras tres lineas sueltas del catalogo. */
.cat-filtro+.cat-subfiltro{margin-top:-28px;margin-bottom:40px;padding-left:16px;
  border-left:2px solid var(--line)}
.cat-subfiltro .tag{padding:7px 14px;font-size:14px}

/* la rejilla del catalogo crece por filas, a diferencia de las tres tarjetas
   de la portada: aqui puede haber cuarenta equipos */
.cat-grid{grid-auto-rows:1fr;row-gap:28px}

/* sin foto que ensenar: el servicio es texto, la card va solo con cuerpo */
.card-servicio .body{gap:12px}
.serv-mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.serv-mini li{position:relative;padding-left:18px;font-size:14.5px;
  color:rgba(255,255,255,.88)}
.serv-mini li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;
  background:var(--cyan)}

.cat-vacio{border:1px solid var(--line);border-top:3px solid var(--blue);
  background:var(--surface);padding:52px 36px;text-align:center}
.cat-vacio h2{font-size:clamp(1.5rem,2.6vw,2rem);max-width:34ch;margin-inline:auto}
.cat-vacio p{margin:16px auto 26px;max-width:52ch}

.paginacion{margin-top:52px;border-top:1px solid var(--line);padding-top:24px}
.paginacion .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.paginacion .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:2px;
  font-size:15px;font-weight:600;color:var(--ink-1);text-decoration:none;
  font-variant-numeric:tabular-nums}
.paginacion .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.paginacion .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.paginacion .dots{border-color:transparent}

/* cabecera con la foto al costado del titulo.
   Nace en /servicios/ y la usa tambien /sobre-nosotros/, asi que se declara
   GENERICA desde el principio en vez de con prefijo `sv-`: dos consumidores
   ya son motivo de sobra para no duplicar la rejilla y tener que arreglarla
   dos veces.

   La clase solo se pone si el adjunto existe. Sin ella la cabecera es el
   `.head` de siempre y no cambia nada.

   `.head` trae `max-width:60ch` y `.cat-head` 64ch. Dentro de una columna ya
   estrecha eso dejaria el texto apelotonado a la izquierda con un hueco al
   lado, asi que aqui se les quita: el limite de medida lo pone la columna. */
.head-duo{display:grid;grid-template-columns:1.4fr .6fr;gap:48px;
  align-items:center;margin-bottom:30px}
.head-duo .head,.head-duo .cat-head{max-width:none;margin-bottom:0}
.head-duo-foto{margin:0}
.head-duo-foto img{display:block;width:100%;height:auto}

.cat-servicios{margin-top:84px;padding-top:56px;border-top:1px solid var(--line)}
.cat-servicios .head{margin-bottom:32px}
.cat-servicios .head h2{font-size:clamp(1.7rem,3vw,2.3rem)}

/* --- ficha de servicio ---
   Sin galeria: aqui no hay producto que ensenar, asi que el texto manda y la
   caja de accion es una columna estrecha al lado. */
.servicio{padding-block:40px 80px}
.sv-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:56px;align-items:start}
.sv-texto .eq-sec:first-of-type{margin-top:44px}
.sv-box{border:1px solid var(--line);border-top:3px solid var(--blue);
  background:var(--surface);padding:28px 26px}
.sv-box-tit{font-size:15px;font-family:var(--f-ui);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.sv-tiempo{margin-top:14px;font-size:16px;color:var(--ink-1)}
.sv-box .eq-cta{margin-top:20px}
/* los sintomas son una lista de dos columnas, no una tabla de datos:
   la izquierda es una frase entera y necesita mas sitio que un «Resolucion» */
.sv-senales .eq-spec{grid-template-columns:1fr 1fr}
.sv-senales dt{text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink-1)}
.sv-senales dd{color:var(--ink-2)}

/* Como funciona: los 4 pasos de /servicios/. El numero lo pone el contador de
   la <ol>, no un <span> a mano, para que la lista siga siendo una lista para el
   lector de pantalla y se pueda reordenar sin tocar el CSS. */
.sv-pasos{margin-bottom:46px}
.sv-pasos h2{font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.01em}
.sv-pasos ol{counter-reset:paso;list-style:none;margin:22px 0 0;padding:0;
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sv-pasos li{counter-increment:paso;position:relative;
  padding:18px 18px 18px 54px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface)}
.sv-pasos li::before{content:counter(paso);position:absolute;left:18px;top:17px;
  width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  font-family:var(--f-ui);font-size:13.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.sv-pasos h3{margin:0;font-size:16px;letter-spacing:-.005em}
.sv-pasos li p{margin:6px 0 0;font-size:14.5px;color:var(--ink-2)}

/* bloque de sintomas del listado /servicios/ */
.sv-lista{margin-bottom:46px}
.sv-lista h2{font-size:clamp(1.4rem,2.4vw,1.85rem);letter-spacing:-.01em}
.sv-lista-intro{margin:12px 0 22px;max-width:62ch;color:var(--ink-2)}
/* El enlace repite el nombre del servicio en cada sintoma: en el listado eso
   son 10 repeticiones, asi que va en tamano de apoyo y no compite con la
   frase del sintoma, que es lo que el visitante esta buscando. */
.sv-quien{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;
  font-family:var(--f-ui);color:var(--blue)}
/* Cada sintoma es enlazable. El 96px es el mismo de `.eq-box`: la cabecera es
   pegajosa y sin esto el sintoma recien enlazado aparece justo DEBAJO de ella,
   o sea que el enlace lleva al sitio correcto y no se ve nada. */
.sv-lista .eq-spec{scroll-margin-top:96px}
/* Al llegar por el enlace se resalta un momento: con diez seguidos, saber cual
   de ellos es «el suyo» no puede depender de contar filas. */
.sv-lista .eq-spec:target{background:var(--surface);
  box-shadow:inset 3px 0 0 var(--blue)}
/* El «#» no ensucia la lista: sale al pasar por encima y SIEMPRE con el foco,
   o con teclado no habria manera de llegar a el. */
.sv-ancla{margin-left:8px;color:var(--ink-3);text-decoration:none;
  font-weight:400;opacity:0;transition:opacity .15s}
.eq-spec:hover .sv-ancla,.sv-ancla:focus{opacity:1}
.sv-ancla:hover{color:var(--blue)}
@media (hover:none){
  /* En tactil no hay hover: o se ve siempre o no se ve nunca. Se deja tenue. */
  .sv-ancla{opacity:.45}
}

.sv-cierre{margin-top:52px;border-top:1px solid var(--line);padding-top:34px}
.sv-cierre h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.015em}
.sv-cierre p{margin-top:14px;max-width:60ch;color:var(--ink-2)}
.sv-plazo{font-weight:600;color:var(--ink-1)}
/* La salida al catalogo va despues de los botones y en tono de apoyo: es la
   segunda opcion del que llego aqui con una averia, no la primera. */
.sv-otra{margin-top:22px;font-family:var(--f-ui);font-size:14.5px}
.sv-otra a{color:var(--blue);font-weight:600}

/* --- aparicion por barrido (solo si el JS arranca) --- */
html.js .reveal{opacity:0;transform:translateY(16px);
  clip-path:inset(0 100% 0 0);
  transition:opacity .55s ease,
    transform .6s cubic-bezier(.22,.7,.3,1),
    clip-path .72s cubic-bezier(.22,.7,.3,1);
  transition-delay:var(--d,0ms)}
/* el inset negativo al final deja salir la sombra del hover */
html.js .reveal.is-in{opacity:1;transform:none;clip-path:inset(-25% -25% -25% -25%)}

/* Variante PLANA: solo barrido, sin el empujon vertical.
   La usan la cabecera y el hero, que ya estan en pantalla al cargar. Ahi el
   translateY se lee como un salto de maquetacion, no como una entrada — y en
   la cabecera, que es sticky, ademas pelea con el desplazamiento propio. */
html.js .reveal.plano{transform:none}

/* Cabecera y hero entran al CARGAR, no al hacer scroll: ya estan a la vista.
   El barrido es mas lento que el de las tarjetas (.9s frente a .72s) porque
   son piezas anchas —la barra ocupa el ancho entero— y a la velocidad corta
   el borde cruza tan rapido que no se lee como barrido sino como parpadeo. */
html.js.hero-entra .reveal.plano{transition-duration:.6s,.6s,.9s}

/* El H1 se barre desde su propia caja, no desde el borde de la pantalla: sin
   esto la linea larga tarda casi un segundo en descubrirse entera. */
html.js .hero .reveal{will-change:clip-path}

/* LA LUPA NO PUEDE QUEDARSE RECORTADA.
   `.buscar` es hija de `.bar`, asi que el barrido de entrada la anima como a
   las demas piezas y le deja el `clip-path` del estado final puesto PARA
   SIEMPRE. Un clip-path recorta tambien a los descendientes absolutos, y esa
   caja mide 40x40: el panel de 420 px quedaba recortado a nada. El boton
   respondia —el aria-expanded cambiaba— pero no aparecia el panel ni se podia
   pulsar dentro. Terminado el barrido se suelta el recorte.

   EL MENU TAMPOCO (21 ago). Misma causa, segunda victima y la peor: `nav.main`
   es hermana de `.buscar` dentro de `.bar`, se anima igual y se queda con
   `inset(-25%)` puesto. El nav mide 28 px de alto, o sea que el margen que
   deja ese -25% son 7 px, y el desplegable de «Catalogo» cae 227 px hacia
   abajo: se recortaba entero. El sintoma enganaba porque el CSS del
   desplegable funciona —medido: con el foco dentro, `opacity` llega a 1 y
   `visibility` a `visible`—, pero `elementFromPoint` sobre el panel devolvia
   `.bar` en vez del enlace. No se veia ni se podia pulsar, y en Local no
   salia porque alli el barrido ya habia terminado sin la clase. */
html.js .buscar.reveal.is-in,
html.js nav.main.reveal.is-in{clip-path:none}

@media (prefers-reduced-motion:reduce){
  /* Quien pide menos movimiento ve el contenido y punto. Sin este bloque el
     barrido corria igual: el JS del carrusel si lo miraba, el de aparicion
     no. Se anula con `!important` porque las reglas de arriba son igual de
     especificas y ganaria la ultima declarada. */
  html.js .reveal,
  html.js .reveal.is-in{
    opacity:1 !important;transform:none !important;
    clip-path:none !important;transition:none !important}
}

@media (max-width:900px){
  .hero,.split{grid-template-columns:1fr;gap:40px;padding-block:56px}

  /* Las opciones del test se apilan: son frases, no tarjetas, y en carrusel
     horizontal habria que deslizar para leer la pregunta entera. */
  .test{padding:24px 20px}
  .test-ops{grid-template-columns:1fr}
  .test-paso legend,.test-out h3{font-size:22px}
  .test-tag{margin-left:0;flex-basis:100%}

  /* MOVIL: mismo hero que en escritorio — foto a sangre de fondo y el texto
     centrado encima. El resto del sitio (y la cabecera) sigue en blanco. */
  /* En movil el botón es lo que se pierde: la barra del navegador se come
     unos 60px de los 100vh nominales. 62vh + cabecera deja el botón dentro. */
  /* MOVIL VUELVE AL CENTRO. La izquierda funciona en escritorio porque sobra
     ancho a la derecha; aqui no sobra nada, y alineado a la izquierda el
     bloque queda descolgado con un margen derecho irregular. */
  .hero{padding-block:52px 56px;min-height:min(62vh,480px);gap:0;
    justify-items:center;text-align:center}
  .hero h1,.hero .sub{margin-inline:auto}
  .hero .cta{justify-content:center}
  /* y sin velo lateral: el texto ya no esta a la izquierda */
  .hero-scrim{background:linear-gradient(180deg,rgba(4,20,36,.52) 0%,
    rgba(4,20,36,.40) 45%,rgba(4,20,36,.58) 100%)}
  /* el H1 manda: ocupa el ancho completo, sin tope de linea */
  /* balance NO: acorta las lineas y deja huecos. Aqui el H1 debe llenar. */
  /* 9vw y no mas: con el H1 corto la palabra larga es «Impresoras», que a
     partir de ahi ya no cabe en una linea en 360px. */
  .hero h1{font-size:clamp(2rem,9vw,2.9rem);max-width:none;text-wrap:normal}
  .hero .sub{margin-top:14px;font-size:16.5px}
  .hero .cta{margin-top:24px}
  .hero .btn{width:min(100%,320px)}
  .steps{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr;gap:26px;padding:26px 22px;margin-top:32px}
  /* FRANJA DE CIFRAS: una sola fila que se desliza. En 2x2 ocupaba media
     pantalla para decir cuatro numeros. Ancho por contenido, no por columnas:
     «43» no necesita lo mismo que «L-V 8:00-16:00». */
  .stats{display:flex;grid-template-columns:none;gap:1px;
    overflow-x:auto;overscroll-behavior-x:contain;
    margin-inline:-24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .stat{flex:0 0 auto;padding:14px 18px}
  .stat dt{font-size:11px;margin-bottom:2px;white-space:nowrap}
  .stat dd{font-size:21px}
  .sec{padding-block:56px}

  /* CARDS EN CARRUSEL HORIZONTAL.
     En vertical una card ocupa toda la pantalla y se desperdicia el ancho.
     El strip sangra hasta los bordes con margin negativo + padding igual,
     asi la 1a card queda alineada con el titulo y la ultima no se pega. */
  .grid-3{display:flex;grid-template-columns:none;gap:16px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:24px;
    margin-inline:-24px;padding:4px 24px 10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .grid-3::-webkit-scrollbar{display:none}
  /* 78% deja asomar la siguiente: es lo que dice «esto se desliza» */
  .grid-3 > *{flex:0 0 78%;min-width:0;scroll-snap-align:start}
  /* cotizacion: una columna. El formulario PRIMERO — es la accion */
  .quote-grid{grid-template-columns:1fr;gap:36px}
  .quote-form-box{padding:26px 20px;margin-inline:-24px;border-inline:0}
  .quote-form .fila{grid-template-columns:1fr;gap:0}
  .quote-enviar{width:100%}
  .quote-head::after{width:90px;margin-top:18px}

  /* contacto NO es carrusel: son datos, se leen de un vistazo */
  .contact .grid-3{display:grid;grid-template-columns:1fr;gap:28px;
    overflow:visible;margin-inline:0;padding:0}
  .contact .grid-3 > *{flex:none}

  /* FICHA DE EQUIPO EN MOVIL: una columna y la caja DEJA de ser pegajosa.
     Con sticky en vertical la caja se quedaria clavada tapando la foto. */
  .eq-grid{grid-template-columns:1fr;gap:32px}
  .eq-box{position:static;top:auto}
  .equipo{padding-block:24px 56px}
  .migas{margin-bottom:20px}
  .eq-foto{aspect-ratio:1/1;padding:18px;margin-inline:-24px;border-inline:0}
  .eq-thumb{width:60px;height:60px}
  .eq-sec{margin-top:52px}
  /* las specs bajan a una columna: en dos, el valor no cabe */
  .eq-specs{grid-template-columns:1fr;gap:0}
  .eq-spec{grid-template-columns:1fr;gap:2px;padding:12px 0}
  /* los tres bloques se apilan. Aqui no se hace carrusel: son listas de
     datos, no tarjetas de muestra, y esconder las specs tras un gesto es
     esconder lo unico que decide la compra */
  .eq-bloques,.eq-bloques.cols-1,.eq-bloques.cols-2{grid-template-columns:1fr;
    gap:30px;padding:26px 22px;margin-inline:-24px;border-radius:0;border-inline:0}
  /* los botones de cotizar se quedan a la vista al final del scroll */
  .eq-cta{position:sticky;bottom:0;z-index:5;background:var(--ground);
    padding:14px 0 12px;margin-inline:-24px;padding-inline:24px;
    box-shadow:0 -10px 24px -16px rgba(7,32,58,.4)}
  .eq-cta .fine{display:none}

  /* CATALOGO EN MOVIL: NO es carrusel.
     El carrusel horizontal es para una fila de tres tarjetas de muestra. Un
     listado de cuarenta equipos en carrusel esconde el catalogo entero detras
     de un gesto y no deja ver cuantos hay. Se recorre hacia abajo. */
  .catalogo,.servicio{padding-block:24px 56px}
  .cat-head{margin-bottom:22px}
  /* la foto baja debajo del texto y se limita: a ancho completo empujaria el
     H1 y la lista de sintomas fuera de la primera pantalla, que es justo
     donde tienen que estar para quien llama con la impresora parada. */
  .head-duo{grid-template-columns:1fr;gap:20px;margin-bottom:22px}
  .head-duo-foto{max-width:300px}
  .cat-filtro{margin-bottom:28px}
  .cat-filtro+.cat-subfiltro{margin-top:-18px;margin-bottom:28px}
  .cat-grid,.cat-servicios .grid-3{display:grid;grid-template-columns:1fr;
    gap:20px;overflow:visible;margin-inline:0;padding:0}
  .cat-grid > *,.cat-servicios .grid-3 > *{flex:none}
  .cat-vacio{padding:36px 22px;margin-inline:-24px;border-inline:0}
  .cat-servicios{margin-top:56px;padding-top:40px}

  /* ficha de servicio: una columna y la caja al final, ya sin sticky */
  .sv-grid{grid-template-columns:1fr;gap:32px}
  .sv-box{margin-inline:-24px;border-inline:0;padding:24px}
  /* el sticky de .eq-cta es para la ficha de equipo, donde flota sobre el
     fondo blanco. Dentro de esta caja gris se veria como un parche. */
  .sv-box .eq-cta{position:static;margin-inline:0;padding-inline:0;box-shadow:none;
    background:transparent}
  .sv-box .eq-cta .fine{display:block}
  .sv-senales .eq-spec{grid-template-columns:1fr}

  /* logo centrado, hamburguesa a la izquierda */
  .bar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding-block:10px}
  .burger{display:flex;order:1;flex:0 0 44px;margin-left:-10px}
  .brand{order:2;flex:1 1 auto;justify-content:center;align-self:center}
  /* La lupa HACE de contrapeso del burger, así que el pseudoelemento que lo
     hacía antes sobra: con los dos, el logo se descentra. */
  .bar::after{display:none}
  .buscar{order:3;flex:0 0 34px;position:static}
  .buscar-abrir{width:34px;height:40px}
  /* Suelto del boton y anclado a la barra: a 34px de ancho, un panel de 420px
     colgado del boton se sale de la pantalla por la derecha. */
  .buscar-panel{left:24px;right:24px;width:auto;top:calc(100% + 10px)}
  .brand img{height:38px}
  nav.main{order:4;width:100%;margin-left:0;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease}
  nav.main ul{flex-direction:column;gap:0;width:100%}
  /* Sube de 340 a 620 porque ahora el panel lleva diez enlaces: con el valor
     viejo el submenú del catálogo quedaba cortado a media lista y no había
     forma de llegar a Suministros. */
  nav.main.open{max-height:620px;padding-top:8px}
  nav.main a{display:block;padding:13px 2px;font-size:16.5px;border-bottom:1px solid var(--line)}
  nav.main a:hover{border-bottom-color:var(--line)}

  /* En móvil no hay hover: el desplegable se deshace y las líneas van
     anidadas a la vista, sangradas para que se lean como lo que son. */
  nav.main .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;
    background:none;transition:none}
  nav.main .sub-menu::before{display:none}
  nav.main .sub-menu a{padding:12px 2px 12px 18px;font-size:15.5px;
    color:var(--ink-2);border-bottom:1px solid var(--line);white-space:normal}
  nav.main .menu-item-has-children > a::after{float:right;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ======================================================================
   ASISTENTE DE CATALOGO
   Ventana flotante, presente en todo el sitio. El z-index es alto porque
   tiene que quedar por encima de la cabecera pegajosa.
   ====================================================================== */
.chat{position:fixed;right:18px;bottom:18px;z-index:60;
  font-family:var(--f-ui);display:flex;flex-direction:column;align-items:flex-end;gap:12px}

/* el boton: circulo azul con el contador de la lista encima */
.chat-abrir{width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  background:var(--blue);color:#fff;display:grid;place-items:center;position:relative;
  box-shadow:0 6px 22px rgba(8,58,105,.32);transition:background .18s ease,transform .18s ease}
.chat-abrir:hover{background:var(--blue-deep);transform:translateY(-2px)}

/* el globito de bienvenida: sale a la IZQUIERDA del boton, no encima.
   Va en position:absolute y no en el flujo del .chat porque, si ocupara sitio,
   al aparecer y desaparecer empujaria el boton arriba y abajo. */
.chat-saludo{position:absolute;right:66px;bottom:12px;display:flex;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:0 6px 20px rgba(8,58,105,.16);white-space:nowrap;
  opacity:0;transform:translateX(8px) scale(.96);transform-origin:right center;
  transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.chat-saludo[hidden]{display:none}
.chat-saludo.is-on{opacity:1;transform:none;pointer-events:auto}
.chat-saludo-txt{border:0;background:none;cursor:pointer;font:inherit;font-size:14px;
  font-weight:600;color:var(--ink-1);padding:11px 6px 11px 16px}
.chat-saludo-x{border:0;background:none;cursor:pointer;color:var(--ink-3);
  font-size:20px;line-height:1;padding:0 12px 0 4px;align-self:stretch}
.chat-saludo-x:hover{color:var(--ink-1)}
/* la puntita que lo ata al boton */
.chat-saludo::after{content:"";position:absolute;right:-6px;top:50%;width:11px;height:11px;
  background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);
  transform:translateY(-50%) rotate(45deg);border-radius:2px}
/* El contador sale del atributo y no de un <span>: asi el JS toca un solo
   sitio y no hay un nodo vacio en el DOM cuando la lista esta vacia. */
.chat-abrir.tiene::after{content:attr(data-n);position:absolute;top:-2px;right:-2px;
  min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--cyan);
  color:#08283F;font-size:12.5px;font-weight:700;line-height:22px;text-align:center;
  border:2px solid #fff}

.chat-panel{width:min(92vw,382px);height:min(70vh,560px);display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 48px rgba(8,58,105,.20)}
.chat-panel[hidden]{display:none}

.chat-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;background:var(--blue);color:#fff}
.chat-top b{display:block;font-family:var(--f-display);font-size:16.5px;line-height:1.2}
.chat-top small{display:block;font-size:12.5px;color:rgba(255,255,255,.82)}
.chat-x{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;
  padding:0 4px}

/* `position:relative` NO es decorativo: chat.js alinea arriba la primera
   burbuja de cada respuesta con `offsetTop`, y sin esto el navegador lo mide
   contra el ancestro posicionado —la caja fija del chat— y el scroll salta a
   cualquier sitio. */
.chat-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;
  background:var(--surface);font-size:15px;line-height:1.55;position:relative}
.chat-msg p{margin:0}
.chat-bot{max-width:92%;align-self:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:4px 14px 14px 14px;padding:10px 12px;color:var(--ink-1)}
.chat-yo{max-width:82%;align-self:flex-end;background:var(--blue);color:#fff;
  border-radius:14px 4px 14px 14px;padding:10px 12px}
.chat-fine{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.chat-bot .chat-fine{color:var(--ink-3)}

/* tarjeta de equipo dentro de la conversacion */
.chat-eq{display:flex;flex-direction:column;gap:3px;padding:10px 0;
  border-top:1px solid var(--line)}
.chat-eq:first-child{border-top:0;padding-top:0}
.chat-eq b{font-size:15px;color:var(--ink-1)}
.chat-eq-linea{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.chat-eq-res{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.chat-eq-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;align-items:center}

/* Un solo aspecto para todos los botones sueltos del chat: los atajos, las
   acciones de la tarjeta y las de la lista. Sin esto cada bloque inventaba
   el suyo. */
.chat-body button,.chat-link{font:inherit;font-size:13px;cursor:pointer;
  border:1px solid var(--blue);background:#fff;color:var(--blue);
  border-radius:999px;padding:5px 11px;text-decoration:none;display:inline-block}
.chat-body button:hover,.chat-link:hover{background:var(--blue);color:#fff}
.chat-eq-acc a{font-size:13px;color:var(--blue);font-weight:600}
/* el de mandar es el unico solido: es la accion que cierra */
.chat-body button.chat-btn{background:var(--blue);color:#fff}
.chat-body button.chat-btn:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.chat-acc{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}

.chat-lista{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.chat-lista li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.chat-lista b{flex:1 1 100%;font-size:14.5px;color:var(--ink-1)}
.chat-lista > li > span:not(.chat-lista-acc){font-size:13px;color:var(--ink-3)}
.chat-lista-acc{display:flex;gap:6px;margin-left:auto}
.chat-lista-acc button{padding:3px 9px;min-width:30px;text-align:center}

/* El texto del catalogo, movido debajo de la rejilla. Discreto a proposito:
   sigue ahi para Google y para quien baja del todo, pero ya no compite con las
   fichas. Vacio no ocupa nada. */
.cat-pie{max-width:72ch;margin:32px auto 0;color:var(--ink-3);font-size:14.5px;
  line-height:1.6}
.cat-pie:empty{display:none}
.cat-pie p{margin:0}

/* El boton fijo de WhatsApp, encima de la barra de escribir.
   Verde de WhatsApp y no azul de marca a proposito: es la unica salida del
   panel que lleva a otra aplicacion, y quien la busca la busca por el color.
   Ancho completo porque compite con la barra de escribir, no con los botones
   de dentro de la conversacion. */
.chat-wa{margin:0;padding:10px 10px 0;background:#fff}
.chat-wa[hidden]{display:none}
.chat-wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;border:0;
  border-radius:999px;padding:10px 14px;background:#25d366;color:#0b3d20}
.chat-wa-btn:hover{background:#1eb457;color:#fff}
.chat-wa-btn svg{flex:none}

/* Sin el borde de arriba: ya lo pone .chat-wa cuando el boton esta visible, y
   dos lineas seguidas parecen un error de maquetacion. */
.chat-wa:not([hidden]) + .chat-form{border-top:0}

.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.chat-form input{flex:1;min-width:0;font:inherit;font-size:15px;padding:9px 12px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink-1)}
.chat-form input:focus{border-color:var(--cyan)}
.chat-form button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;
  border-radius:999px;padding:9px 16px;background:var(--blue);color:#fff}
.chat-form button:hover{background:var(--blue-deep)}

@media (max-width:900px){
  /* En movil la ventana ocupa casi todo: un panel de 382px flotando sobre una
     pantalla de 390 deja un margen que no sirve para nada y encoge el teclado. */
  .chat{right:12px;bottom:12px;left:12px;align-items:flex-end}
  .chat-panel{width:100%;height:min(78vh,620px)}
}

/* --- ficha de suministro ---
   Reusa .sv-grid y .sv-box de la ficha de servicio: misma forma de pagina
   —texto ancho y caja de accion al lado— y no hay motivo para dos rejillas
   que hacen lo mismo. Lo propio de aqui es la lista de numeros de parte. */
.suministro{padding-block:40px 80px}

/* Cada fila es codigo + aclaracion + boton. El codigo va en monoespaciada
   porque es lo que el visitante COPIA: en una tipografia proporcional el
   0 y la O de «800300-350» se confunden, y un digito mal copiado en un
   consumible es una devolucion. */
.su-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.su-parte{display:grid;grid-template-columns:minmax(0,17ch) 1fr auto;gap:8px 20px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.su-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;font-weight:600;color:var(--ink-1);
  /* Se puede seleccionar de un doble clic sin arrastrar el resto de la fila. */
  user-select:all}
.su-desc{color:var(--ink-2);line-height:1.5}
.su-cta{font-family:var(--f-ui);font-size:14px;font-weight:600;white-space:nowrap;
  color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.su-cta:hover,.su-cta:focus-visible{border-bottom-color:currentColor}

@media (max-width:760px){
  /* El grid de tres columnas no cabe: 17ch de codigo mas el boton dejan la
     aclaracion en dos palabras por linea. Se apila, y el boton se va a la
     derecha de la primera fila para no gastar una linea entera el solo. */
  .su-parte{grid-template-columns:1fr auto;gap:4px 16px}
  .su-desc{grid-column:1 / -1}
}