/* Jade Motor · tienda a medida — 02/09/26
   Diseño alineado con el resto del grupo (serviman.eu, areadeserviciodemolina.com):
   Montserrat servida EN LOCAL, un color de acento por marca, héroe a sangre con foto oscurecida,
   etiquetas en versalitas y botón sólido + botón de contorno.
   Nada de CDNs ni de fuentes de Google: todo sale de este servidor. */

@font-face{font-family:Montserrat;src:url(/assets/fuentes/montserrat-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url(/assets/fuentes/montserrat-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Montserrat;src:url(/assets/fuentes/montserrat-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url(/assets/fuentes/montserrat-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url(/assets/fuentes/montserrat-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  /* El verde es el del logo de Jade: es SU color, no uno elegido por mí. */
  --verde:#6cb52d; --verde-osc:#4e8a1f; --verde-claro:#eef7e4;
  --tinta:#1c232b; --tinta-2:#4a5560; --suave:#7b8794;
  --linea:#e3e8ee; --fondo:#f3f5f8; --papel:#fff;
  --rojo:#c0392b; --rojo-claro:#fdecea; --ambar:#b7791f; --ambar-claro:#fff6e0; --azul:#2b6cb0; --azul-claro:#e8f1fb;
  --ancho:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--tinta);background:var(--papel);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.saltar{position:absolute;left:-999px;top:0;background:var(--verde);color:#fff;padding:8px 14px;z-index:999}
.saltar:focus{left:8px;top:8px}
.oculto-movil{}
.hueco{flex:1}
svg{flex:none}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.barra-util{background:var(--tinta);color:#cfd6de;font-size:12.5px}
.barra-util .envoltura{display:flex;gap:22px;align-items:center;height:38px}
.barra-util a,.barra-util span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.barra-util a:hover{color:#fff}
.barra-util b{color:#fff;font-weight:600}
.cab{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linea)}
.cab .envoltura{display:flex;align-items:center;gap:26px;height:76px}
.cab .logo{flex:0 0 auto}
/* 03/09/26 - El logo se veia CHAFADO. Es elemento flex y podia encogerse; al estrecharse,
   el max-width:100% global le recortaba el ancho mientras la altura seguia fija en 34px.
   flex:0 0 auto + max-width:none: la marca no se deforma nunca. */
.cab .logo img{height:34px;width:auto;max-width:none}
.cab nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:14px}
.cab nav a{color:var(--tinta-2);padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.cab nav a:hover,.cab nav a.on{color:var(--tinta);border-bottom-color:var(--verde)}
.menu-btn{display:none;border:0;background:none;color:var(--tinta);padding:6px;cursor:pointer;margin-left:auto}
/* El acceso a la cuenta vive ahora en el menu, junto a la lupa y el carrito: mismo trato. */
.carrito-ico,.cuenta-ico{position:relative;display:inline-flex;align-items:center;color:var(--tinta);padding:6px}
.cuenta-ico{border-radius:50%;width:38px;height:38px;justify-content:center}
.cuenta-ico:hover{color:var(--verde-osc);background:var(--gris-suave,#f3f5f2)}
/* Punto verde: hay sesion iniciada. */
.cuenta-ico i{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--verde);border:2px solid #fff}
.carrito-ico b{position:absolute;top:-2px;right:-4px;background:var(--verde);color:#fff;font-size:10.5px;font-weight:800;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.carrito-ico:hover{color:var(--verde-osc)}

/* Buscador: lo más importante de la tienda, así que vive en la cabecera. */
/* 03/09/26 - Buscador plegado en una lupa, a la derecha. Se despliega al pulsarla, al enfocarlo
   o al pasar el raton: asi tambien se puede usar sin JavaScript. Con busqueda hecha nace abierto. */
/* Los tres iconos, en grupo y pegados entre si; el hueco grande queda solo antes del grupo. */
.cab-acciones{display:flex;align-items:center;gap:2px;margin-left:18px;flex:0 0 auto}
.buscador{display:flex;align-items:center}
.buscador input{width:0;min-width:0;padding:0;border:1.5px solid transparent;border-radius:22px;
  font:inherit;font-size:14px;background:#fff;outline:none;opacity:0;
  transition:width .22s ease,opacity .16s ease,padding .22s ease}
.buscador:hover input,.buscador:focus-within input,.buscador.abierto input{
  width:250px;opacity:1;padding:9px 14px;border-color:var(--linea)}
.buscador:focus-within input,.buscador.abierto input{border-color:var(--verde)}
.buscador button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:0;border-radius:50%;background:none;color:var(--tinta);cursor:pointer;flex:0 0 auto}
.buscador button:hover{color:var(--verde-osc);background:var(--gris-suave,#f3f5f2)}

/* Avisos de una lectura y banda de tienda */
.flash{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:13px 16px;border-radius:6px;font-weight:600;font-size:14px}
.flash.ok{background:var(--verde-claro);color:#2f5d0f}
.flash.error{background:var(--rojo-claro);color:#8b2a20}
.flash.aviso{background:var(--ambar-claro);color:#7a4f0e}
.flash a{text-decoration:underline}

/* ── Héroe ──────────────────────────────────────────────────────────────── */
.heroe{position:relative;min-height:440px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#20272f}
.heroe img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.heroe .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,25,.92),rgba(16,20,25,.35) 55%,rgba(16,20,25,.15))}
.heroe .envoltura{position:relative;padding-top:70px;padding-bottom:52px;width:100%}
.ceja{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#cfe3b8;margin-bottom:14px}
.ceja::before{content:"";width:26px;height:2px;background:var(--verde)}
.seccion .ceja,.cuenta .ceja,.claro .ceja{color:var(--verde-osc)}
.heroe h1{font-size:44px;line-height:1.1;font-weight:800;margin:0 0 14px;max-width:15em}
.heroe h1 em{font-style:normal;color:var(--verde)}
.heroe p{font-size:16.5px;color:#dde3ea;max-width:44em;margin:0 0 26px}
.botones{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;padding:13px 24px;border-radius:6px;
  border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1.2;text-align:center}
.btn-solido{background:var(--verde);color:#fff}
.btn-solido:hover{background:var(--verde-osc)}
.btn-linea{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-linea:hover{background:#fff;color:var(--tinta)}
.btn-tinta{background:var(--tinta);color:#fff}
.btn-tinta:hover{background:#000}
.btn-borde{border-color:var(--linea);color:var(--tinta);background:#fff}
.btn-borde:hover{border-color:var(--tinta)}
.btn-peligro{background:var(--rojo);color:#fff}
.btn-peligro:hover{background:#96291d}
.btn-pequeno{padding:8px 14px;font-size:13px}
.btn-bloque{width:100%}
.btn[disabled],.btn.desactivado{opacity:.55;cursor:not-allowed}
.enlace{background:none;border:0;padding:0;color:var(--verde-osc);font-weight:600;cursor:pointer;text-decoration:underline}
.enlace.rojo{color:var(--rojo)}

/* Cifras del héroe, como en serviman */
.cifras{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap}
.cifras div{line-height:1.15}
.cifras b{display:block;font-size:30px;font-weight:800}
.cifras span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#aeb9c5}

/* Búsqueda por referencia en portada */
/* 03/09/26 - Era una franja verde maciza de lado a lado y cargaba la vista: se lleva casi todo
   el verde de la portada. Pasa a la tinta oscura de la casa y el verde se queda donde manda,
   en el boton. */
.buscar-ref{background:var(--tinta);color:#fff;padding:26px 0;border-top:3px solid var(--verde)}
.buscar-ref .envoltura{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.buscar-ref h2{margin:0;font-size:18px;font-weight:800}
.buscar-ref p{margin:2px 0 0;font-size:13.5px;color:#c8d2c0}
.buscar-ref form{display:flex;flex:1;min-width:280px;max-width:520px;margin-left:auto}
.buscar-ref input{flex:1;font:inherit;padding:13px 16px;border:0;border-radius:6px 0 0 6px;min-width:0}
.buscar-ref button{font:inherit;font-weight:800;padding:13px 22px;border:0;border-radius:0 6px 6px 0;background:var(--verde);color:#fff;cursor:pointer}
.buscar-ref button:hover{background:var(--verde-osc)}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.seccion{padding:64px 0}
.seccion.corta{padding:40px 0}
.seccion.gris{background:var(--fondo)}
.seccion.oscura{background:var(--tinta);color:#fff}
.titulo{font-size:26px;font-weight:800;margin:0 0 6px;line-height:1.2}
.subtitulo{color:var(--suave);margin:0 0 30px;font-size:15px}
.oscura .subtitulo{color:#aeb9c5}
.cabeza-seccion{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.cabeza-seccion .titulo,.cabeza-seccion .subtitulo{margin-bottom:0}
.cabeza-seccion .ver-todo{font-weight:700;color:var(--verde-osc);white-space:nowrap}
.cabeza-seccion .ver-todo:hover{text-decoration:underline}

.cabecera-seccion{background:var(--tinta);color:#fff;padding:46px 0 40px;position:relative;overflow:hidden}
.cabecera-seccion.con-foto{min-height:280px;display:flex;align-items:flex-end}
.cabecera-seccion img.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cabecera-seccion .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,25,.9),rgba(16,20,25,.3))}
.cabecera-seccion .envoltura{position:relative;width:100%}
.cabecera-seccion h1{font-size:34px;font-weight:800;margin:0 0 8px;line-height:1.15}
.cabecera-seccion p{margin:0;color:#dde3ea;max-width:52em;font-size:15.5px}

/* Bloques de dos columnas texto + foto (portada, ocasión, contacto) */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dos img{border-radius:8px;width:100%;object-fit:cover;aspect-ratio:4/3}
.dos h2{font-size:28px;font-weight:800;margin:0 0 14px;line-height:1.2}
.dos p{color:var(--tinta-2);margin:0 0 14px}
.dos .btn{margin-top:8px}
.ventajas{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ventaja{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:22px 20px}
.ventaja b{display:block;font-size:15px;margin:0 0 6px}
.ventaja span{font-size:13.5px;color:var(--tinta-2)}
.ventaja i{display:block;font-style:normal;font-size:22px;color:var(--verde-osc);margin-bottom:10px}
.marcas-fila{display:flex;flex-wrap:wrap;gap:12px}
.marcas-fila a{border:1px solid var(--linea);border-radius:6px;padding:12px 18px;font-weight:700;font-size:14px;background:#fff;display:flex;align-items:center;gap:10px}
.marcas-fila a:hover{border-color:var(--verde)}
.marcas-fila img{height:28px;width:auto;max-width:none}
.marcas-fila small{color:var(--suave);font-weight:600}

/* ── Familias ───────────────────────────────────────────────────────────── */
.familias{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;grid-auto-flow:dense;gap:6px}
.fam{position:relative;overflow:hidden;border-radius:4px;background:var(--tinta);display:block}
.familias>.fam:nth-child(8n+1){grid-column:span 2;grid-row:span 2}
.familias>.fam:nth-child(8n+4){grid-column:span 2}
.familias>.fam:nth-child(8n+6){grid-row:span 2}
.familias.lisa>.fam{grid-column:auto!important;grid-row:auto!important}
.fam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.85);transition:filter .4s,transform .4s}
.fam .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,16,20,.9),rgba(12,16,20,.25) 62%,transparent)}
.fam.sinfoto{background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 12px,transparent 12px 24px),
  linear-gradient(160deg,#33414f,#232d37)}
.fam .txt{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff}
.fam .n{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:5px}
.fam .t{display:flex;align-items:flex-end;min-height:2.4em;font-size:18px;font-weight:700;line-height:1.2}
.fam:hover img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
.subfamilias{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.subfamilias a{border:1px solid var(--linea);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;background:#fff}
.subfamilias a:hover,.subfamilias a.on{border-color:var(--verde);color:var(--verde-osc)}
.subfamilias small{color:var(--suave)}
.orden{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--suave);margin-left:auto}
.orden select{font:inherit;font-size:13.5px;padding:7px 10px;border:1px solid var(--linea);border-radius:5px;background:#fff}
.listado-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.listado-cab .cuantos{font-size:13.5px;color:var(--suave);font-weight:600}

/* ── Rejilla de productos ───────────────────────────────────────────────── */
.productos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.productos.tres{grid-template-columns:repeat(3,1fr)}
.prod{background:#fff;border:1px solid var(--linea);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s;position:relative}
.prod:hover{border-color:#c9d3dd;box-shadow:0 4px 16px rgba(28,35,43,.07)}
.prod .foto{aspect-ratio:4/3;background:var(--fondo);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.prod .foto img{width:100%;height:100%;object-fit:contain;padding:10px}
/* Sin foto: casi ningún recambio la tiene. Se enseña la REFERENCIA en grande, que es lo que se busca. */
.prod .sinfoto{font-size:15px;font-weight:800;letter-spacing:.04em;color:#9aa5b1;text-align:center;padding:14px;word-break:break-all}
.prod .cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .ref{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--verde-osc)}
.prod .nom{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--tinta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .precio{margin-top:auto;font-size:17px;font-weight:800}
.prod .precio s,.moto .precio s{font-size:13px;color:var(--suave);font-weight:600;margin-right:4px}
.prod .sin-precio,.moto .sin-precio{margin-top:auto;font-size:13px;color:var(--suave);font-weight:600}
.iva{font-size:11px;color:var(--suave);font-weight:600;white-space:nowrap}
.sello{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;background:var(--tinta);color:#fff}
.sello.oferta{background:var(--rojo)}
.sello.taller{background:var(--azul)}
.sello.cond{background:var(--verde)}
.sello.estado{left:auto;right:10px;background:var(--tinta)}
.stock{font-size:11.5px;font-weight:700}
.stock.si{color:var(--verde-osc)}
.stock.no{color:var(--ambar)}

/* ── Motos ──────────────────────────────────────────────────────────────── */
.motos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.moto{background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.moto:hover{box-shadow:0 6px 22px rgba(28,35,43,.09)}
.moto .foto{aspect-ratio:4/3;background:var(--fondo);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.moto .foto img{width:100%;height:100%;object-fit:cover}
.moto .sinfoto{color:#9aa5b1;font-weight:700}
.moto.vendida .foto img{filter:grayscale(1);opacity:.7}
.moto .cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.moto .ref{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-osc)}
.moto .nom{font-size:16px;font-weight:700;line-height:1.3}
.moto .datos-moto{font-size:13px;color:var(--tinta-2);font-weight:600}
.moto .precio{margin-top:auto;padding-top:8px;font-size:20px;font-weight:800}
.ficha-moto{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.ficha-moto .galeria .principal{border-radius:8px;overflow:hidden;background:var(--fondo);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.ficha-moto .galeria .principal img{width:100%;height:100%;object-fit:cover}
.miniaturas{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.miniaturas img{width:84px;height:64px;object-fit:cover;border-radius:5px;border:2px solid transparent;cursor:pointer}
.miniaturas img.on,.miniaturas img:hover{border-color:var(--verde)}
.caja{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:22px 24px}
.caja h3{margin:0 0 12px;font-size:16px}
.caja.verde{background:var(--verde-claro);border-color:#cfe3b8}
.rasgos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin:18px 0}
.rasgos div{border-bottom:1px solid var(--linea);padding:8px 0}
.rasgos span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);font-weight:700}
.rasgos b{font-size:15px}

/* ── Ficha ──────────────────────────────────────────────────────────────── */
.ficha{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:44px;align-items:start}
.ficha .foto{background:var(--fondo);border:1px solid var(--linea);border-radius:8px;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.ficha .foto img{object-fit:contain;padding:26px;width:100%;height:100%}
.ficha .sinfoto{text-align:center;padding:30px;color:#9aa5b1}
.ficha .sinfoto b{display:block;font-size:22px;font-weight:800;color:#6b7785;word-break:break-all;margin-bottom:8px}
.ficha h1{font-size:28px;font-weight:800;line-height:1.22;margin:6px 0 12px}
.datos{width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14px}
.datos th{text-align:left;font-weight:600;color:var(--suave);padding:9px 0;width:36%;border-bottom:1px solid var(--linea)}
.datos td{padding:9px 0;border-bottom:1px solid var(--linea);font-weight:600}
.precio-grande{font-size:34px;font-weight:800;line-height:1}
.precio-grande s{font-size:18px;color:var(--suave);font-weight:600;margin-right:8px}
.precio-bloque{display:flex;flex-direction:column;gap:6px;margin:14px 0 18px}
.comprar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:6px 0 18px}
.cantidad{display:inline-flex;border:1.5px solid var(--linea);border-radius:6px;overflow:hidden}
.cantidad button{border:0;background:#fff;width:40px;font-size:18px;cursor:pointer;color:var(--tinta-2)}
.cantidad button:hover{background:var(--fondo)}
.cantidad input{width:56px;text-align:center;border:0;border-left:1px solid var(--linea);border-right:1px solid var(--linea);font:inherit;font-weight:700;font-size:15px}
.cantidad input::-webkit-outer-spin-button,.cantidad input::-webkit-inner-spin-button{-webkit-appearance:none}
.migas{font-size:13px;color:var(--suave);margin:18px 0 6px}
.migas a:hover{color:var(--verde-osc)}
.descripcion{font-size:14.5px;color:var(--tinta-2);line-height:1.7}
.descripcion img{border-radius:6px}
.familias-de{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.familias-de a{background:var(--fondo);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600}
.familias-de a:hover{background:var(--verde-claro);color:var(--verde-osc)}
.notas-compra{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.notas-compra div{font-size:12.5px;color:var(--tinta-2);padding:12px 14px;background:var(--fondo);border-radius:6px}
.notas-compra b{display:block;color:var(--tinta);margin-bottom:2px}

/* ── Formularios ────────────────────────────────────────────────────────── */
.formulario{display:grid;gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label,.campo>span{font-size:12.5px;font-weight:700;color:var(--tinta-2)}
.campo label small,.campo>span small{font-weight:500;color:var(--suave)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:14.5px;padding:11px 13px;border:1.5px solid var(--linea);border-radius:6px;background:#fff;outline:none;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde)}
.campo textarea{min-height:120px;resize:vertical}
.campo .error-campo{color:var(--rojo);font-size:12.5px;font-weight:600}
.campo.error input,.campo.error select,.campo.error textarea{border-color:var(--rojo)}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fila.tres{grid-template-columns:1fr 1fr 1fr}
.marcar{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.marcar input{margin-top:3px;width:auto;accent-color:var(--verde)}
.opciones{display:grid;gap:8px}
.opcion{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--linea);border-radius:6px;padding:12px 14px;cursor:pointer;background:#fff}
.opcion:has(input:checked){border-color:var(--verde);background:var(--verde-claro)}
.opcion input{margin-top:4px;accent-color:var(--verde)}
.opcion b{display:block;font-size:14.5px}
.opcion span{font-size:13px;color:var(--tinta-2)}
.opcion .importe{margin-left:auto;font-weight:800;white-space:nowrap}
.miel{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.pista{font-size:13px;color:var(--suave)}
fieldset{border:0;padding:0;margin:0}
legend{font-size:17px;font-weight:800;margin:0 0 12px;padding:0}

/* ── Acceso (enlace + passkey) ──────────────────────────────────────────── */
.acceso{max-width:460px;margin:50px auto 60px}
.acceso .caja{padding:30px 32px}
.acceso h1{font-size:24px;font-weight:800;margin:0 0 6px}
.acceso .pista{margin:0 0 20px}
.o-bien{display:flex;align-items:center;gap:12px;color:var(--suave);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:20px 0}
.o-bien::before,.o-bien::after{content:"";flex:1;height:1px;background:var(--linea)}
.enviado{background:var(--verde-claro);border:1px solid #cfe3b8;border-radius:8px;padding:22px 24px;font-size:15px}
.enviado b{color:#2f5d0f}
.aviso-js{display:none;font-size:13px;color:var(--rojo);font-weight:600;margin-top:8px}
.aviso-js.ver{display:block}

/* ── Carrito y pago ─────────────────────────────────────────────────────── */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--suave);padding:10px 12px;border-bottom:2px solid var(--linea)}
.tabla td{padding:12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla .num{text-align:right;white-space:nowrap}
.tabla .art{display:flex;gap:12px;align-items:center}
.tabla .art img{width:56px;height:56px;object-fit:contain;background:var(--fondo);border-radius:5px;padding:4px}
.tabla td.pendiente{color:#b45309;font-weight:700;white-space:normal}
.tabla tr.pendiente td{background:#fffbeb}
.tabla .art .sinfoto{width:56px;height:56px;background:var(--fondo);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#9aa5b1;text-align:center;padding:4px;word-break:break-all}
.tabla .art b{display:block;font-size:14px}
.tabla .art small{color:var(--suave);font-weight:600}
.tabla .art .avisito{color:var(--ambar);font-size:12px;font-weight:700}
.tabla .cantidad input{width:50px;padding:6px 0}
.tabla .cantidad button{width:32px}
.tabla tr:hover td{background:#fafbfc}
.carrito{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.resumen{background:var(--fondo);border-radius:8px;padding:22px 24px;position:sticky;top:96px}
.resumen h3{margin:0 0 14px;font-size:16px}
.resumen .linea{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;border-bottom:1px solid #e5eaf0}
.resumen .linea.total{border:0;font-size:19px;font-weight:800;padding-top:12px}
.resumen .linea.total small{font-size:12px;color:var(--suave);font-weight:600;display:block}
.resumen .linea .desc{color:var(--verde-osc);font-weight:700}
.resumen .btn{margin-top:16px}
.resumen .cupon{display:flex;gap:6px;margin:12px 0 4px}
.resumen .cupon input{flex:1;font:inherit;padding:9px 11px;border:1.5px solid var(--linea);border-radius:6px;min-width:0;text-transform:uppercase}
.resumen .cupon button{font:inherit;font-weight:700;padding:9px 12px;border:0;border-radius:6px;background:var(--tinta);color:#fff;cursor:pointer}
.resumen .cupon-msg{font-size:12.5px;font-weight:600;margin:0 0 6px}
.resumen .cupon-msg.ok{color:var(--verde-osc)}
.resumen .cupon-msg.error{color:var(--rojo)}
.pago{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start}
.pago .bloque{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:24px 26px;margin-bottom:18px}
.pago .bloque h2{font-size:17px;font-weight:800;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.pago .bloque h2 i{font-style:normal;background:var(--verde);color:#fff;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.pago .lineas-mini{font-size:13.5px}
.pago .lineas-mini div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #e5eaf0}
.pago .lineas-mini span:first-child{color:var(--tinta-2)}
.direccion-guardada{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--linea);border-radius:6px;padding:12px 14px;cursor:pointer;font-size:13.5px}
.direccion-guardada:has(input:checked){border-color:var(--verde);background:var(--verde-claro)}
.direccion-guardada b{display:block}
.oculto{display:none!important}
.transferencia{background:var(--ambar-claro);border:1px solid #f1dfb0;border-radius:8px;padding:18px 22px;font-size:14.5px}
.transferencia b{display:block;font-size:16px;margin-bottom:6px}
.transferencia code{font-family:inherit;font-weight:800;font-size:15px;letter-spacing:.04em}

/* ── Pedido (seguimiento) y cuenta ──────────────────────────────────────── */
.pedido-cab{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;margin-bottom:22px}
.pedido-cab h1{margin:0 0 4px;font-size:28px;font-weight:800}
.pedido-cab .fecha{color:var(--suave);font-weight:600;font-size:14px}
.estado{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:4px;background:var(--fondo);color:var(--tinta-2)}
.estado.pendiente{background:var(--ambar-claro);color:var(--ambar)}
.estado.pagado,.estado.entregado{background:var(--verde-claro);color:var(--verde-osc)}
.estado.preparando,.estado.enviado{background:var(--azul-claro);color:var(--azul)}
.estado.cancelado,.estado.devuelto{background:var(--rojo-claro);color:var(--rojo)}
.pasos{display:flex;gap:0;margin:0 0 28px;counter-reset:paso}
.pasos div{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--suave);position:relative;padding-top:30px}
.pasos div::before{counter-increment:paso;content:counter(paso);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:var(--linea);color:var(--tinta-2);display:flex;align-items:center;justify-content:center;font-size:11px}
.pasos div::after{content:"";position:absolute;top:11px;left:50%;width:100%;height:2px;background:var(--linea);z-index:-1}
.pasos div:last-child::after{display:none}
.pasos div.hecho{color:var(--verde-osc)}
.pasos div.hecho::before{background:var(--verde);color:#fff}
.pasos div.hecho::after{background:var(--verde)}
.dos-cajas{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.caja .dir{font-size:14px;line-height:1.55;color:var(--tinta-2)}
.caja .dir b{color:var(--tinta)}
.historial{list-style:none;margin:0;padding:0;font-size:13.5px}
.historial li{padding:9px 0;border-bottom:1px solid var(--linea);display:flex;gap:14px}
.historial time{color:var(--suave);white-space:nowrap;font-weight:600;min-width:120px}
.cuenta{display:grid;grid-template-columns:240px minmax(0,1fr);gap:34px;align-items:start;margin:34px 0 60px}
.cuenta-menu{background:var(--fondo);border-radius:8px;padding:10px;position:sticky;top:96px}
.cuenta-menu a,.cuenta-menu button{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:6px;font-weight:600;font-size:14px;color:var(--tinta-2);border:0;background:none;cursor:pointer}
.cuenta-menu a:hover,.cuenta-menu a.on{background:#fff;color:var(--tinta)}
.cuenta-menu a.on{box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cuenta-menu .yo{padding:10px 14px 14px;border-bottom:1px solid var(--linea);margin-bottom:8px}
.cuenta-menu .yo b{display:block;font-size:15px}
.cuenta-menu .yo small{color:var(--suave);word-break:break-all}
.cuenta h1{font-size:26px;font-weight:800;margin:0 0 18px}
.cuenta h2{font-size:18px;font-weight:800;margin:26px 0 12px}
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:18px 20px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.tarjeta b{font-size:15px}
.tarjeta .acciones{margin-top:auto;padding-top:10px;display:flex;gap:12px;font-size:13px}
.tarjeta.nueva{align-items:center;justify-content:center;text-align:center;border-style:dashed;color:var(--suave);min-height:120px;cursor:pointer}
.tarjeta .marca-def{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-osc)}
.pedidos-lista{display:grid;gap:10px}
.pedidos-lista a{display:grid;grid-template-columns:120px 1fr auto auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--linea);border-radius:8px;padding:14px 18px;font-size:14px}
.pedidos-lista a:hover{border-color:#c9d3dd}
.pedidos-lista b{font-size:15px}
.pedidos-lista small{color:var(--suave);display:block;font-weight:600}
.pedidos-lista .tot{font-weight:800;font-size:16px;white-space:nowrap}
.passkeys li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea);font-size:14px}
.passkeys li svg{color:var(--verde-osc)}
.passkeys li b{display:block}
.passkeys li small{color:var(--suave);font-weight:600}
.passkeys li .acciones{margin-left:auto;display:flex;gap:12px;font-size:13px;white-space:nowrap}
.passkeys{list-style:none;margin:0 0 18px;padding:0}

/* ── Noticias, contacto, páginas ────────────────────────────────────────── */
.noticias{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.noticia{background:#fff;border:1px solid var(--linea);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.noticia .foto{aspect-ratio:16/9;background:var(--fondo);overflow:hidden}
.noticia .foto img{width:100%;height:100%;object-fit:cover}
.noticia .cuerpo{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.noticia time{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--verde-osc)}
.noticia h3{margin:0;font-size:16.5px;line-height:1.3}
.noticia p{margin:0;font-size:13.5px;color:var(--tinta-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.noticia .leer{margin-top:auto;padding-top:8px;font-weight:700;color:var(--verde-osc);font-size:13.5px}
.prosa{max-width:760px;margin:0 auto;font-size:15.5px;line-height:1.75;color:var(--tinta-2)}
.prosa h1{font-size:32px;font-weight:800;line-height:1.2;color:var(--tinta);margin:0 0 8px}
.prosa h2{font-size:21px;color:var(--tinta);margin:34px 0 10px}
.prosa h3{font-size:17px;color:var(--tinta);margin:26px 0 8px}
.prosa p{margin:0 0 16px}
.prosa ul,.prosa ol{padding-left:22px;margin:0 0 16px}
.prosa li{margin-bottom:6px}
.prosa img{border-radius:8px;margin:10px 0 20px}
.prosa a{color:var(--verde-osc);text-decoration:underline}
.prosa .meta{font-size:13px;color:var(--suave);font-weight:600;margin-bottom:22px}
.prosa table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 20px}
.prosa th,.prosa td{border:1px solid var(--linea);padding:8px 10px;text-align:left}
.sedes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.sede{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:22px 24px;font-size:14px}
.sede h3{margin:0 0 4px;font-size:17px;font-weight:800}
.sede .marcas{font-size:12px;color:var(--verde-osc);font-weight:700;margin:0 0 10px}
.sede p{margin:0 0 6px;color:var(--tinta-2);display:flex;gap:8px;align-items:flex-start}
.sede p svg{color:var(--verde-osc);margin-top:4px}
.sede p b{color:var(--tinta)}
.sede .btn{margin-top:10px}
.contacto{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{background:var(--tinta);color:#aeb9c5;padding:52px 0 30px;margin-top:70px;font-size:14px}
.pie .cols{display:grid;grid-template-columns:1.4fr .8fr .9fr 1.3fr;gap:34px}
.pie h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px}
.pie a:hover{color:#fff}
.pie ul{list-style:none;margin:0;padding:0}
.pie li{margin-bottom:8px}
.pie .pie-txt{font-size:13px;margin:14px 0 0;line-height:1.6}
.pie .pie-txt b{color:#fff}
.pie-sedes li{font-size:12.5px;line-height:1.5;margin-bottom:10px}
.pie-sedes b{color:#fff}
.pie .legal{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;font-size:12.5px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.vacio{text-align:center;padding:70px 20px;color:var(--suave)}
.vacio b{display:block;font-size:19px;color:var(--tinta);margin-bottom:8px}
.vacio .btn{margin-top:18px}
.paginacion{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.paginacion a,.paginacion span{padding:9px 15px;border:1px solid var(--linea);border-radius:5px;font-weight:600;font-size:14px}
.paginacion .on{background:var(--verde);color:#fff;border-color:var(--verde)}
.paginacion a:hover{border-color:var(--verde)}

/* ── Asistente FenixIA (mismo widget que serviman.eu, con el verde de Jade) ─ */
.chat-fab{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;border:0;padding:0;cursor:pointer;z-index:900;
  background:#fff;box-shadow:0 8px 26px rgba(28,35,43,.28);overflow:hidden;transition:transform .2s}
.chat-fab:hover{transform:scale(1.06)}
/* Cada 14 s da un botecito, para que se vea que esta ahi. */
.chat-fab{animation:fab-saludo 14s ease-in-out infinite}
.chat-fab:hover{animation:none}
@keyframes fab-saludo{0%,88%,100%{transform:translateY(0) scale(1)}
  91%{transform:translateY(-7px) scale(1.05)}94%{transform:translateY(0) scale(1)}97%{transform:translateY(-3px) scale(1.02)}}
.chat-avatar{width:100%;height:100%;display:block}
/* 03/09/26 - Se mueve «de vez en cuando»: el balanceo era tan corto que no se notaba. Ahora el
   ciclo dura 11 s y esta quieta la mayor parte del tiempo; el gesto se concentra al final,
   asi llama la atencion sin ser un muñeco temblando todo el rato. */
.chat-avatar .avatar-head{transform-origin:50px 62px;animation:avatar-tilt 11s ease-in-out infinite}
.chat-avatar .eye{transform-origin:center;animation:avatar-blink 4.5s infinite}
.chat-avatar .mouth-smile{animation:avatar-smile 7s ease-in-out infinite}
@keyframes avatar-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes avatar-tilt{0%,62%{transform:rotate(0)}70%{transform:rotate(-7deg)}78%{transform:rotate(5deg)}
  86%{transform:rotate(-3deg)}94%,100%{transform:rotate(0)}}
@keyframes avatar-smile{0%,80%,100%{d:path("M45 60c2 2.5 6 2.5 8 0")}90%{d:path("M44 59c3 4 7 4 10 0")}}
.chat-bubble{position:fixed;right:96px;bottom:36px;background:#fff;color:var(--tinta);font-size:13px;font-weight:600;padding:10px 14px;border-radius:12px 12px 2px 12px;
  box-shadow:0 6px 20px rgba(28,35,43,.18);z-index:899;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s;cursor:pointer;max-width:220px}
.chat-bubble.show{opacity:1;transform:translateY(0);pointer-events:auto;animation:bubble-float 3s ease-in-out infinite}
@keyframes bubble-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.chat-panel{position:fixed;right:22px;bottom:96px;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 120px);background:#fff;border-radius:14px;
  box-shadow:0 18px 50px rgba(28,35,43,.3);z-index:901;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;transition:opacity .22s,transform .22s}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto}
.chat-head{background:var(--tinta);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.chat-head__info{flex:1;min-width:0}
.chat-head__info h4{margin:0;font-size:15px;font-weight:800}
.chat-head__info p{margin:0;font-size:12px;color:#aeb9c5}
.chat-head .status{color:var(--verde);font-weight:700}
.chat-head .status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verde);margin-right:5px;vertical-align:middle}
.chat-head__brand{height:22px;width:auto;opacity:.9}
.chat-close{background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 2px}
.chat-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--fondo)}
.chat-msg{max-width:86%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;animation:msgIn .25s ease-out;word-wrap:break-word}
.chat-msg.bot{background:#fff;color:var(--tinta);border-bottom-left-radius:3px;align-self:flex-start;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.chat-msg.user{background:var(--verde);color:#fff;border-bottom-right-radius:3px;align-self:flex-end}
.chat-msg a{text-decoration:underline;font-weight:600}
.chat-msg.bot a.wa{display:inline-block;margin-top:8px;background:#25d366;color:#fff;text-decoration:none;padding:7px 12px;border-radius:6px;font-size:12.5px}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chat-typing{display:inline-flex;gap:4px;padding:12px 14px}
.chat-typing i{width:7px;height:7px;border-radius:50%;background:#aeb9c5;animation:typing 1.2s infinite}
.chat-typing i:nth-child(2){animation-delay:.2s}.chat-typing i:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.chat-quick{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:#fff;border-top:1px solid var(--linea);scrollbar-width:none}
.chat-quick button{flex:none;font:inherit;font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;border:1px solid var(--linea);background:#fff;cursor:pointer;color:var(--tinta-2)}
.chat-quick button:hover{border-color:var(--verde);color:var(--verde-osc)}
.chat-input{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid var(--linea)}
.chat-input input{flex:1;font:inherit;font-size:14px;padding:10px 12px;border:1.5px solid var(--linea);border-radius:8px;outline:none;min-width:0}
.chat-input input:focus{border-color:var(--verde)}
.chat-input button{font:inherit;font-weight:800;font-size:18px;width:42px;border:0;border-radius:8px;background:var(--verde);color:#fff;cursor:pointer}
.chat-input button:hover{background:var(--verde-osc)}

/* ── Adaptación ─────────────────────────────────────────────────────────── */
.accesos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.acceso{position:relative;display:block;min-height:220px;border-radius:12px;overflow:hidden;background:var(--tinta);color:#fff}
.acceso>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .5s}
.acceso:hover>img{transform:scale(1.04)}
.acceso .velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,20,25,.92),rgba(16,20,25,.25))}
.acceso .txt{position:relative;padding:34px 28px 26px;display:flex;flex-direction:column;gap:6px;height:100%;justify-content:flex-end;min-height:220px}
.acceso .ico{width:48px;height:48px;margin-bottom:6px}
.acceso b{font-size:26px;font-weight:800;line-height:1.1}
.acceso span{color:#dde3ea;font-size:14.5px;max-width:34em}
.acceso em{font-style:normal;font-weight:800;color:var(--verde);font-size:14px;margin-top:8px}
/* ─── Despiece (la sección principal: catálogos oficiales + cesta en PDF + lista pegada) ─── */
.despiece-cab .casco{width:72px;height:72px;margin-bottom:12px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.despiece-cab img.fondo{opacity:.6}
.despiece-marcas{text-align:center;margin-top:22px}
.despiece-marcas h2,.despiece-buscar h2,.despiece-pegar h2,.despiece-resultado h2{font-size:26px;font-weight:800;margin:0 0 10px;line-height:1.2}
.despiece-marcas>p,.despiece-buscar>p,.despiece-pegar>p{color:var(--tinta-2);max-width:60em;margin:0 auto 26px;font-size:15.5px;line-height:1.6}
.despiece-marcas .logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:840px;margin:0 auto}
.despiece-marcas .logos a{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px 20px;background:#fff;border:1px solid var(--linea);border-radius:10px;transition:.18s;color:var(--tinta)}
.despiece-marcas .logos a:hover{border-color:var(--verde);box-shadow:0 12px 30px rgba(20,20,20,.08);transform:translateY(-2px)}
.despiece-marcas .logos img{max-width:200px;width:100%;height:auto;object-fit:contain}
.despiece-marcas .logos span{font-weight:800;font-size:14px;color:var(--verde-osc)}
.despiece-zona{max-width:760px;margin:44px auto 40px}
.despiece-zona .caja{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:28px 26px 24px;box-shadow:0 10px 30px rgba(20,20,20,.07);text-align:center}
.despiece-zona h3{margin:0 0 6px;font-size:22px;font-weight:800;line-height:1.3}
.despiece-zona .sub{margin:0 0 18px;font-size:15.5px;color:var(--tinta-2);line-height:1.55}
.despiece-zona .flash{margin:0 0 16px;text-align:left}
.despiece-zona .suelta{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;border:2px dashed #cfd6de;border-radius:12px;padding:26px 18px;background:#fafbfc;transition:.18s;color:var(--verde)}
.despiece-zona .suelta:hover,.despiece-zona .suelta.on{border-color:var(--verde);background:var(--verde-claro)}
.despiece-zona .suelta:focus-within{outline:2px solid var(--verde);outline-offset:2px}
.despiece-zona .suelta input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.despiece-zona .txt{font-size:16px;color:var(--tinta)}
.despiece-zona .mini{display:block;font-size:13px;color:var(--suave)}
.despiece-zona .elegido{margin:12px 0 0;font-size:15px;font-weight:600;color:var(--tinta);word-break:break-all}
.despiece-zona .btn{margin-top:16px}
.despiece-zona .nota{margin:14px 0 0;font-size:13.5px;color:var(--suave);line-height:1.6}
.despiece-zona .nota .btn{margin-top:0;margin-bottom:10px}
.despiece-buscar{text-align:center;padding:36px 0 8px;border-top:1px solid var(--linea)}
.buscador-grande{display:flex;max-width:560px;margin:0 auto 14px}
.buscador-grande input{flex:1;font:inherit;font-size:15px;padding:13px 16px;border:1.5px solid var(--linea);border-right:0;border-radius:6px 0 0 6px;min-width:0;outline:none}
.buscador-grande input:focus{border-color:var(--verde)}
.buscador-grande .btn{border-radius:0 6px 6px 0}
.despiece-buscar .pista a{color:var(--verde-osc);font-weight:700;text-decoration:underline}
.despiece-pegar{max-width:760px;margin:36px auto 0;padding-top:36px;border-top:1px solid var(--linea);text-align:center}
.despiece-pegar .formulario{text-align:left}
.despiece-pegar textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;min-height:190px;line-height:1.5}
.despiece-resultado{margin-top:22px}
.despiece-resultado .resumen{color:var(--tinta-2);font-size:15.5px;margin:0 0 18px}
.despiece-resultado .tabla-envoltura{overflow-x:auto;border:1px solid var(--linea);border-radius:8px}
.despiece-resultado .tabla .ref{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;white-space:nowrap}
.despiece-resultado .tabla .ok{color:var(--verde-osc);font-weight:700}
.despiece-resultado .tabla span.pendiente{color:#b45309;font-weight:700}
.despiece-resultado .apagado{color:var(--suave)}
.despiece-resultado .acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

@media (max-width:1000px){
  .familias{grid-template-columns:repeat(3,1fr)}
  .productos,.productos.tres{grid-template-columns:repeat(3,1fr)}
  .motos,.noticias,.tarjetas{grid-template-columns:repeat(2,1fr)}
  .ficha,.ficha-moto,.dos,.contacto,.carrito,.pago,.cuenta{grid-template-columns:1fr;gap:28px}
  .resumen,.cuenta-menu{position:static}
  .ventajas{grid-template-columns:repeat(2,1fr)}
  .pie .cols{grid-template-columns:1fr 1fr}
  .heroe h1{font-size:34px}
  .cab nav{gap:16px;font-size:13.5px}
}
@media (max-width:760px){
  .accesos{grid-template-columns:1fr}
  .barra-util .envoltura{gap:14px}
  .oculto-movil{display:none!important}
  .cab .envoltura{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}
  .menu-btn{display:inline-flex;order:1}
  .carrito-ico{order:2}
  .cab .logo{order:0;flex:0 0 auto;margin-right:auto}
  .cab-acciones{order:2;margin-left:0}
  .buscador{order:0}
  .buscador:hover input,.buscador:focus-within input,.buscador.abierto input{width:min(46vw,220px)}
  .cab nav{order:4;width:100%;margin-left:0;flex-direction:column;gap:0;display:none;border-top:1px solid var(--linea);padding-top:6px}
  .cab nav.abierto{display:flex}
  .cab nav a{padding:11px 4px;border-bottom:1px solid var(--linea)}
  .cab nav a.on{border-bottom-color:var(--linea);color:var(--verde-osc)}
  .familias{grid-template-columns:repeat(2,1fr);grid-auto-rows:132px}
  .familias>.fam:nth-child(8n+1),.familias>.fam:nth-child(8n+4),
  .familias>.fam:nth-child(8n+6){grid-column:auto;grid-row:auto}
  .productos,.productos.tres{grid-template-columns:repeat(2,1fr);gap:10px}
  .motos,.noticias,.tarjetas,.sedes,.ventajas,.dos-cajas,.rasgos,.notas-compra{grid-template-columns:1fr}
  .heroe{min-height:380px}
  .heroe h1{font-size:27px}
  .heroe .envoltura{padding-top:50px;padding-bottom:36px}
  .cifras{gap:22px}
  .cifras b{font-size:24px}
  .seccion{padding:44px 0}
  .titulo{font-size:22px}
  .cabecera-seccion h1{font-size:26px}
  .fila,.fila.tres{grid-template-columns:1fr}
  .pie .cols{grid-template-columns:1fr}
  .tabla thead{display:none}
  .tabla tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--linea)}
  .tabla td{border:0;padding:2px 0}
  .tabla td.art{grid-column:1 / -1}
  .tabla td.num{text-align:left}
  .pedidos-lista a{grid-template-columns:1fr auto}
  .pasos div{font-size:10.5px}
  .chat-panel{right:12px;bottom:88px;height:calc(100vh - 110px)}
  .chat-fab{right:14px;bottom:14px;width:58px;height:58px}
  .chat-bubble{right:82px;bottom:26px}
  .acceso .caja{padding:22px 18px}
}

/* Impresión: solo el contenido (pedidos, condiciones) */
@media print {
  .barra-util, .cab, .pie, .chat, .chat-btn, .menu-btn, .buscador, .saltar, .flash, .btn, .aviso-js { display: none !important; }
  body { background: #fff; color: #000; }
  .envoltura { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
}

/* ── Portada al estilo Serviman (03/09/26) ────────────────────────────────────
   Cabecera negra en degradado sobre la foto, cifras en vertical a la derecha y
   banda de sedes abajo que se despliega. Todo el despliegue es CSS: sin JS
   funciona igual, y con teclado tambien (:focus-within). */
/* ── Cabecera sobre la foto y su transicion al hacer scroll (03/09/26) ───────
   Barra + menu comparten envoltorio para que el degradado sea uno solo y baje
   MUY por debajo del menu (antes moria pegado y se veia un corte). Al pasar el
   primer 12% de la pantalla, el bloque se fija arriba, pasa a blanco con un
   degradado suave a transparente, encoge y cruza los dos logos. */
.cab-envoltorio.sobre-foto{position:absolute;top:0;left:0;right:0;z-index:45;padding-bottom:96px;
  background:linear-gradient(180deg,rgba(10,12,10,.94) 0%,rgba(10,12,10,.88) 42%,rgba(10,12,10,.60) 72%,rgba(10,12,10,0) 100%);
  transition:background .45s ease,padding-bottom .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease}
.cab-envoltorio.sobre-foto .barra-util{background:none;transition:max-height .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
.cab-envoltorio.sobre-foto .barra-util .envoltura{transition:height .4s cubic-bezier(.22,.61,.36,1)}

.cab.cab-sobre{position:static;background:none;border-bottom:0}
.cab.cab-sobre .envoltura{transition:height .4s cubic-bezier(.22,.61,.36,1)}
.cab.cab-sobre nav a{color:#e7ece4}
.cab.cab-sobre nav a:hover,.cab.cab-sobre nav a.on{color:#fff;border-bottom-color:var(--verde)}
.cab.cab-sobre .carrito-ico,.cab.cab-sobre .cuenta-ico,.cab.cab-sobre .menu-btn,.cab.cab-sobre .buscador button{color:#e7ece4}
.cab.cab-sobre .cuenta-ico:hover{color:#fff;background:rgba(255,255,255,.12)}
.cab.cab-sobre .cuenta-ico i{border-color:#141a14}
.cab.cab-sobre .carrito-ico:hover,.cab.cab-sobre .buscador button:hover{color:#fff;background:rgba(255,255,255,.12)}
.cab.cab-sobre .buscador input{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.22)}
.cab.cab-sobre .buscador input::placeholder{color:#c3ccbc}

/* Los dos logos ocupan el mismo sitio y se cruzan. */
.cab .logo{position:relative;display:inline-flex}
.cab .logo img{transition:opacity .35s ease}
.cab .logo .logo-oscuro{position:absolute;top:0;left:0;opacity:0}
.cab-envoltorio:not(.sobre-foto) .logo .logo-claro{opacity:0}
.cab-envoltorio:not(.sobre-foto) .logo .logo-oscuro{opacity:1}

/* ── Encogida: fija arriba, blanca y mas baja ── */
.cab-envoltorio.sobre-foto.encogida{position:fixed;padding-bottom:10px;
  background:linear-gradient(180deg,#fff 0%,#fff 78%,rgba(255,255,255,0) 100%)}
.cab-envoltorio.sobre-foto.encogida .barra-util{max-height:0;opacity:0;overflow:hidden;pointer-events:none}
.cab-envoltorio.sobre-foto.encogida .barra-util .envoltura{height:0}
.cab-envoltorio.sobre-foto.encogida .cab .envoltura{height:62px}
.cab-envoltorio.sobre-foto.encogida .logo-claro{opacity:0}
.cab-envoltorio.sobre-foto.encogida .logo-oscuro{opacity:1}
.cab-envoltorio.sobre-foto.encogida .cab.cab-sobre nav a{color:var(--tinta-2)}
.cab-envoltorio.sobre-foto.encogida .cab.cab-sobre nav a:hover,
.cab-envoltorio.sobre-foto.encogida .cab.cab-sobre nav a.on{color:var(--tinta)}
.cab-envoltorio.sobre-foto.encogida .carrito-ico,
.cab-envoltorio.sobre-foto.encogida .cuenta-ico,
.cab-envoltorio.sobre-foto.encogida .menu-btn,
.cab-envoltorio.sobre-foto.encogida .buscador button{color:var(--tinta)}
.cab-envoltorio.sobre-foto.encogida .cuenta-ico:hover,
.cab-envoltorio.sobre-foto.encogida .carrito-ico:hover,
.cab-envoltorio.sobre-foto.encogida .buscador button:hover{color:var(--verde-osc);background:var(--gris-suave,#f3f5f2)}
.cab-envoltorio.sobre-foto.encogida .cuenta-ico i{border-color:#fff}
.cab-envoltorio.sobre-foto.encogida .buscador input{background:#fff;color:var(--tinta);border-color:var(--linea)}
.cab-envoltorio.sobre-foto.encogida .buscador input::placeholder{color:#8a938a}
@media (prefers-reduced-motion:reduce){
  .cab-envoltorio.sobre-foto,.cab-envoltorio.sobre-foto *{transition:none!important}
}
.cab.cab-sobre nav a:hover,.cab.cab-sobre nav a.on{color:#fff;border-bottom-color:var(--verde)}
.cab.cab-sobre .carrito-ico,.cab.cab-sobre .cuenta-ico,.cab.cab-sobre .menu-btn,.cab.cab-sobre .buscador button{color:#e7ece4}
.cab.cab-sobre .cuenta-ico:hover{color:#fff;background:rgba(255,255,255,.12)}
.cab.cab-sobre .cuenta-ico i{border-color:#141a14}
.cab.cab-sobre .carrito-ico:hover,.cab.cab-sobre .buscador button:hover{color:#fff;background:rgba(255,255,255,.12)}
.cab.cab-sobre .buscador input{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.22)}
.cab.cab-sobre .buscador input::placeholder{color:#c3ccbc}

/* Con la cabecera flotando, el heroe empieza arriba del todo y deja hueco al menu. */
/* La primera pantalla es SOLO la foto y la banda de sedes, como en serviman.eu: el heroe ocupa
   el alto de la ventana y la banda queda justo en el borde inferior. */
.heroe.heroe-portada{height:100vh;min-height:600px;max-height:900px;align-items:center}
.heroe.heroe-portada .envoltura{padding-top:110px;padding-bottom:170px}
.heroe.heroe-portada img.fondo{opacity:.62}
.heroe.heroe-portada .velo{background:linear-gradient(180deg,rgba(12,16,12,.55) 0%,rgba(12,16,12,.25) 38%,rgba(12,16,12,.88) 100%)}

/* Banda de sedes, pegada al fondo del heroe. */
.sedes-banda{position:absolute;left:0;right:0;bottom:0;z-index:4;overflow:hidden}
.sedes-tira{display:inline-flex;align-items:stretch;height:118px;background:#fff;max-width:100%}
.sedes-titulo{display:inline-flex;align-items:center;padding:0 20px 0 26px;font-size:17px;font-weight:800;
  line-height:1.15;color:var(--tinta);border-right:1px solid var(--linea)}
.sede-baldosa{position:relative;width:158px;min-width:158px;height:100%;background:#fff;color:var(--tinta-2);
  border-right:1px solid var(--linea);cursor:pointer;overflow:hidden;
  transition:width .5s cubic-bezier(.22,.61,.36,1),background .35s ease,color .35s ease}
.sb-pin{position:absolute;top:20px;left:50%;width:26px;height:26px;transform:translateX(-50%);color:var(--verde-osc);
  transition:top .55s cubic-bezier(.22,.61,.36,1),bottom .55s,left .55s cubic-bezier(.22,.61,.36,1),width .5s,height .5s,transform .55s,color .35s}
.sb-pin svg{width:100%;height:100%}
.sb-ciudad{position:absolute;top:56px;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:700;
  color:var(--tinta);white-space:nowrap;transition:opacity .25s ease,transform .4s ease}
.sb-nombre{position:absolute;top:76px;left:50%;transform:translateX(-50%);font-size:12.5px;line-height:1.15;
  color:inherit;white-space:nowrap;max-width:132px;overflow:hidden;text-overflow:ellipsis;text-align:center;
  transition:top .55s cubic-bezier(.22,.61,.36,1),left .55s,font-size .55s,transform .55s,color .35s,max-width .5s}
.sb-tel,.sb-dir,.sb-horario{position:absolute;left:20px;display:flex;align-items:center;gap:8px;font-size:12.5px;
  line-height:1.2;color:inherit;white-space:nowrap;opacity:0;transform:translateX(-14px);pointer-events:none;
  transition:opacity .3s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.sb-tel{top:52px;font-weight:700}
.sb-tel svg{width:15px;height:15px}
.sb-dir{top:74px;right:16px;overflow:hidden;text-overflow:ellipsis;display:block}
.sb-horario{bottom:16px;right:16px;font-size:11.5px;opacity:0;white-space:normal;line-height:1.25}

/* Desplegada: se ensancha y aparecen los datos rapidos, escalonados. */
.sede-baldosa:hover,.sede-baldosa:focus-within{width:330px;background:var(--tinta);color:#fff}
.sede-baldosa:hover .sb-pin,.sede-baldosa:focus-within .sb-pin{top:auto;bottom:16px;left:20px;width:15px;height:15px;transform:none;color:var(--verde)}
.sede-baldosa:hover .sb-ciudad,.sede-baldosa:focus-within .sb-ciudad{opacity:0;transform:translateX(-50%) translateY(-8px)}
.sede-baldosa:hover .sb-nombre,.sede-baldosa:focus-within .sb-nombre{top:18px;left:20px;font-size:16px;font-weight:800;transform:none;color:#fff;max-width:290px;text-align:left}
.sede-baldosa:hover .sb-tel,.sede-baldosa:focus-within .sb-tel{opacity:1;transform:none;pointer-events:auto;transition-delay:.18s}
.sede-baldosa:hover .sb-dir,.sede-baldosa:focus-within .sb-dir{opacity:1;transform:none;pointer-events:auto;transition-delay:.26s}
.sede-baldosa:hover .sb-horario,.sede-baldosa:focus-within .sb-horario{opacity:.92;transform:none;transition-delay:.34s;left:44px}
.sede-baldosa:hover a,.sede-baldosa:focus-within a{color:#fff}
.sede-baldosa a:hover{text-decoration:underline}

@media (max-width:900px){
  .cab.cab-sobre{position:relative;background:#141a14}
  .heroe.heroe-portada .envoltura{padding-top:44px;padding-bottom:44px}
  .sedes-banda{position:static;background:#fff}
  .sedes-tira{display:grid;grid-template-columns:1fr 1fr;height:auto;width:100%}
  .sedes-titulo{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--linea);padding:14px 18px}
  .sede-baldosa{width:auto;min-width:0;height:auto;padding:16px 16px 16px 42px;border-bottom:1px solid var(--linea)}
  .sb-pin,.sb-ciudad,.sb-nombre,.sb-tel,.sb-dir,.sb-horario{position:static;transform:none;opacity:1;pointer-events:auto;left:auto;right:auto;white-space:normal}
  .sb-pin{width:18px;height:18px;float:left;margin:2px 0 0 -26px}
  .sb-nombre{display:block;font-weight:800;font-size:14px;margin-bottom:4px}
  .sb-ciudad{display:block;margin-bottom:2px}
  .sede-baldosa:hover,.sede-baldosa:focus-within{width:auto;background:#fff;color:var(--tinta-2)}
  .sede-baldosa:hover .sb-nombre,.sede-baldosa:focus-within .sb-nombre{color:inherit;font-size:14px}
  .sede-baldosa:hover .sb-pin,.sede-baldosa:focus-within .sb-pin{color:var(--verde-osc)}
}
@media (prefers-reduced-motion:reduce){
  .chat-fab,.chat-avatar .avatar-head,.chat-avatar .eye,.chat-avatar .mouth-smile,.chat-bubble.show{animation:none!important}
}