/* Inicio de la tienda plotter.pe: banners de campaña, categorías, carrusel de plotters y bloques de ayuda.
   También lo usan servicios, nosotros y las páginas de servicio (portada editorial, bloques imagen + texto). */

/* ---------- Portada: banners de campaña a todo el ancho ----------
   Línea gráfica de la marca: fondo blanco con planos, diagonales roja y azul, equipo a la derecha.
   La imagen es solo el fondo (img/banners/hero-*.jpg); título, precio y botones van en HTML. */
.portada { padding-block: 16px 4px; }
.hx { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #fff; isolation: isolate; container-type: inline-size; }
.hx-marco { display: grid; min-height: max(500px, 42.857cqw); } /* 21:9, y crece si un texto lo necesita */
.hx-slide { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .7s var(--facil), visibility .7s; }
.hx-slide.activo { opacity: 1; visibility: visible; z-index: 1; }
.hx-fondo { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; background: #fff; }
.hx-fondo picture, .hx-fondo img { display: block; width: 100%; height: 100%; }
.hx-fondo img { object-fit: cover; object-position: 80% center; transform-origin: 78% 60%; }
/* Sin fondo propio: foto del producto sobre blanco, a la derecha */
.hx-fondo.contiene img { object-fit: contain; object-position: center; padding: 6% 4% 6% 52%; }
.hx-slide.activo .hx-fondo img { animation: hx-acerca 9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes hx-acerca { from { transform: scale(1.06); } }

.hx-texto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 0 40px clamp(28px, 3.6vw, 56px); color: var(--texto); }
.hx .hx-titulo { font-size: clamp(1.9rem, 1rem + 1.9vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: var(--azul); text-wrap: balance; }
.hx-titulo em { display: block; margin-top: .06em; font-style: normal; font-size: 1.2em; letter-spacing: -0.035em; color: var(--granate); }
/* Palabra por palabra: cada una baja desde su recorte */
.tr { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.tr > span { display: inline-block; }
.hx-slide.activo .tr > span { animation: tr-baja .8s var(--facil) both; animation-delay: calc(var(--i) * 60ms + 120ms); }
/* Cada palabra del título baja desde su recorte, como la línea que el plotter acaba de imprimir */
@keyframes tr-baja { from { transform: translateY(-105%); } to { transform: none; } }
.hx-slide.activo .hx-anim { animation: pasada .7s var(--facil) backwards; animation-delay: var(--d, 0ms); }

/* Trazos rojo, azul y gris bajo el título (los de las piezas impresas) */
.hx-trazo { display: flex; gap: 6px; margin-top: 18px; }
.hx-trazo i { width: 46px; height: 3px; border-radius: 2px; background: var(--rojo); }
.hx-trazo i:nth-child(2) { background: var(--azul); }
.hx-trazo i:nth-child(3) { background: var(--linea-2); }
.hx-lead { margin-top: 14px; max-width: 44ch; font-size: var(--t-base); line-height: 1.55; color: var(--tinta-2, var(--texto)); }
/* Pestaña azul pegada al borde izquierdo con el nombre del equipo, como en las piezas impresas */
.hx-tab { display: inline-flex; align-items: stretch; margin: 20px 0 0 calc(-1 * clamp(28px, 3.6vw, 56px)); font-size: 15px; line-height: 1.2; }
.hx-tab span { padding: 9px 18px 9px clamp(28px, 3.6vw, 56px); background: var(--azul); color: #DCE1F0; }
.hx-tab b { color: #fff; font-weight: 800; }
.hx-tab small { display: flex; align-items: center; padding: 0 22px 0 12px; background: var(--rojo); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.hx-tab:not(:has(small)) span { padding-right: 30px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.hx-datos { display: flex; flex-wrap: wrap; row-gap: 6px; margin-top: 14px; }
.hx-datos li { padding: 0 12px; border-left: 1px solid var(--linea-2); color: var(--azul); font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hx-datos li:first-child { padding-left: 0; border-left: 0; }
.hx-compra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin-top: 20px; }
.hx-precio small { display: block; font-size: 11px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.hx-precio b { display: block; margin-top: 2px; font-size: clamp(1.8rem, 1.3rem + 1.1vw, 2.4rem); font-weight: 800; color: var(--rojo); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hx-ctas { display: flex; flex-wrap: wrap; gap: 8px; }

/* Navegación: flechas y puntos; el punto activo se llena en 7 s y al llenarse pasa al siguiente banner */
.hx-nav { position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0; padding: 0; background: #fff; border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.hx-pag { display: flex; align-items: center; gap: 4px; padding-inline: 14px; }
.hx-pag button { position: relative; width: 18px; height: 3px; border-radius: 0; background: var(--linea-2); overflow: hidden; transition: width .35s var(--facil), background-color .2s; }
.hx-pag button:hover { background: var(--suave); }
.hx-pag button.activo { width: 48px; background: var(--azul-100); }
.hx-pag button i { position: absolute; inset: 0; background: var(--rojo); transform: scaleX(0); transform-origin: left; }
.hx-pag button.activo i { animation: hx-progreso 7s linear forwards; }
.hx:hover .hx-pag .activo i, .hx:focus-within .hx-pag .activo i, .hx.quieto .hx-pag .activo i { animation-play-state: paused; }
@keyframes hx-progreso { to { transform: scaleX(1); } }
.hx-flecha { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 0; color: var(--azul); transition: background-color .2s, color .2s; }
.hx-nav > .hx-flecha:first-child { border-right: 1px solid var(--linea); }
.hx-nav > .hx-flecha:last-child { border-left: 1px solid var(--linea); }
.hx-flecha:hover { background: var(--azul); color: #fff; }
.hx-flecha svg { width: 16px; height: 16px; }


@media (prefers-reduced-motion: reduce) {
  .hx-slide.activo .hx-fondo img, .hx-slide.activo .tr > span, .hx-slide.activo .hx-anim { animation: none; }
  .hx-pag button.activo i { animation: none; transform: scaleX(1); }
}

/* ---------- Presentación y categorías ---------- */
.intro-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: end; margin-bottom: 22px; }
.intro-seo h1 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--azul); }
.intro-cab p { font-size: var(--t-sm); }
.cats-fila { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cat-tile { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 12px 16px; border-radius: var(--r); background: var(--blanco); border: 1px solid var(--linea); transition: border-color .2s, box-shadow .25s; }
.cat-tile:hover { border-color: var(--rojo); box-shadow: inset 0 -3px 0 var(--rojo); }
.cat-img { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden; border-radius: var(--r-sm); background: #fff; }
.cat-img img { width: 100%; height: 100%; object-fit: contain; }
.cat-servicio .cat-img img { object-fit: cover; }
.cat-tile b { color: var(--azul); font-size: var(--t-sm); font-weight: 800; }
.cat-tile small { font-size: 12px; color: var(--suave); }
.cat-tile em { margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--rojo); }

/* Títulos de sección */
.titulo-sec { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--linea); position: relative; }
.titulo-sec::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 2px; background: var(--rojo); }
.titulo-sec h2 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; color: var(--azul); }

/* ---------- Carrusel de productos ---------- */
.carrusel-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.carrusel-flechas { display: flex; gap: 6px; }
.carrusel-flechas button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--linea-2); background: #fff; color: var(--azul); transition: all .2s; }
.carrusel-flechas button:hover:not(:disabled) { background: var(--azul); border-color: var(--azul); color: #fff; }
.carrusel-flechas button:disabled { opacity: .35; cursor: default; }
.carrusel-flechas svg { width: 18px; height: 18px; }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, calc((100% - 64px) / 5)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 18px; margin: -4px -2px -18px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }

/* ---------- Showroom y cotización para empresas ---------- */
.duo-promo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.showroom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--blanco); border: 1px solid var(--linea); }
.showroom > img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.showroom-txt { padding: clamp(22px, 2.6vw, 34px); }
.showroom h2, .empresas h2 { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); letter-spacing: -0.02em; }
.showroom h2 { color: var(--azul); }
.showroom-txt p { margin-top: 8px; font-size: var(--t-sm); }
.showroom-datos { display: grid; gap: 8px; margin-top: 14px; }
.showroom-datos li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.5; }
.showroom-datos svg { width: 18px; height: 18px; color: var(--rojo); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.empresas { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-lg); background: var(--granate); color: #F3DEDE; }
.empresas h2 { color: #fff; }
.empresas p { margin-top: 8px; font-size: var(--t-sm); }
.empresas .lista-check { margin-top: 16px; }
.empresas .lista-check li { color: #fff; font-size: var(--t-sm); }
.empresas .lista-check svg { color: #FFB3B3; }
.empresas .botones { margin-top: auto; padding-top: 20px; }
.empresas .btn-blanco { --fg: var(--granate); }
.empresas .btn-granate { --bg: var(--granate-700); --bg-h: #3E0909; --bd: rgba(255, 255, 255, .5); }
.nota-epson { margin-top: 14px; padding: 12px 16px; border-radius: var(--r); background: var(--azul-50); color: var(--azul); font-size: var(--t-sm); font-weight: 600; }

/* ---------- Bloques editoriales imagen + texto ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split.invertido { grid-template-columns: 1fr 1.1fr; }
.split.invertido .split-media { order: 2; }
.split-media { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media.retrato { aspect-ratio: 4 / 4.6; }
.split h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; color: var(--azul); }
.split p.lead { margin-top: 12px; font-size: var(--t-base); }
.etiqueta-flot { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--r); background: #fff; box-shadow: var(--sombra-2); }
.etiqueta-flot img { width: 48px; height: 48px; object-fit: contain; }
.etiqueta-flot b { display: block; color: var(--azul); font-size: var(--t-sm); }
.etiqueta-flot small { font-size: var(--t-xs); font-weight: 700; color: var(--rojo); }
.mini-prods { display: grid; gap: 8px; margin-top: 20px; }
.mini-prod { display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; border-radius: var(--r); background: #fff; border: 1px solid var(--linea); transition: border-color .2s, box-shadow .25s; }
.mini-prod:hover { border-color: var(--azul-100); box-shadow: var(--sombra-1); }
.mini-prod img { width: 60px; height: 60px; object-fit: contain; }
.mini-prod b { display: block; color: var(--tinta); font-size: var(--t-sm); font-weight: 700; }
.mini-prod small { font-size: var(--t-xs); color: var(--suave); }
.mini-prod .num { color: var(--rojo); font-weight: 800; }
.imprime { clip-path: inset(0 100% 0 0); }
.imprime.impreso { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1); }

/* ---------- Oferta (aparece solo si un producto tiene precio anterior) ---------- */
.oferta-band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: #fff; border: 2px solid var(--rojo); }
.oferta-band h2 { margin-top: 10px; font-size: var(--t-xl); color: var(--azul); }
.oferta-band p { margin-top: 8px; }
.oferta-band .precio { margin-top: 14px; font-size: var(--t-2xl); }
.oferta-band-media img { width: 100%; max-height: 320px; object-fit: contain; }

/* ---------- Ayuda para elegir ---------- */
.ayuda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 24px; align-items: center; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); background: var(--blanco); border: 1px solid var(--linea); }
.ayuda h2 { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); color: var(--azul); }
.ayuda-txt p { margin-top: 6px; font-size: var(--t-sm); }
.ayuda .botones { margin-top: 0; flex-direction: column; }
.pasos-test { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: p; }
.pasos-test li { position: relative; display: grid; gap: 2px; padding: 12px 12px 12px 48px; border-radius: var(--r); background: var(--papel); font-size: var(--t-xs); color: var(--texto); }
.pasos-test li::before { counter-increment: p; content: counter(p); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 0; background: var(--rojo); color: #fff; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); font-weight: 800; font-size: 13px; }
.pasos-test b { color: var(--azul); font-size: var(--t-sm); font-weight: 800; }

/* ---------- Servicio técnico ---------- */
.serv-lista { display: grid; gap: 8px; margin-top: 18px; }
.serv-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r); background: #fff; border: 1px solid var(--linea); transition: border-color .2s, box-shadow .25s; }
.serv-item:hover { border-color: var(--azul-100); box-shadow: var(--sombra-1); }
.serv-item .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--azul-50); color: var(--azul); }
.serv-item .ico svg { width: 20px; height: 20px; }
.serv-item b { display: block; color: var(--tinta); font-size: var(--t-sm); font-weight: 700; }
.serv-item small { font-size: var(--t-xs); }
.serv-item .dato { font-size: 12px; font-weight: 800; color: var(--granate); white-space: nowrap; }

/* ---------- Clientes ---------- */
.clientes img { height: 64px; max-width: 120px; filter: grayscale(1); opacity: .7; }

/* ---------- Cabecera editorial de páginas internas (servicios, nosotros, páginas de servicio) ---------- */
.pag-hero { padding-block: clamp(24px, 3vw, 44px) clamp(36px, 5vw, 64px); background: var(--blanco); border-bottom: 1px solid var(--linea); }
.pag-hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin-top: 12px; color: var(--azul); }
.pag-hero .lead { margin-top: 14px; font-size: var(--t-md); max-width: 52ch; }
.pag-hero-media { aspect-ratio: 5 / 4; box-shadow: var(--sombra-2); }
.pag-hero-media.cuadrada { aspect-ratio: 1; }
.ico-flot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--rojo); color: #fff; flex: none; }
.ico-flot svg { width: 22px; height: 22px; }

/* ---------- Productos (productos.html) ---------- */
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.saltos a { padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--linea-2); background: #fff; color: var(--azul); font-size: var(--t-sm); font-weight: 700; transition: border-color .2s, background-color .2s, color .2s; }
.saltos a:hover { border-color: var(--azul); background: var(--azul); color: #fff; }
.enlaces-sec { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.sec-intro { max-width: 70ch; margin: -4px 0 20px; font-size: var(--t-sm); }
#planos-sec, #mfp-sec, #suministros-sec { scroll-margin-top: calc(var(--alto-header) + 64px); }

/* ---------- Nuestro equipo (nosotros.html): tarjetas de cada asesor ---------- */
.equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.asesor { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--linea); }
.asesor img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.asesor-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-top: 1px solid var(--linea); }
.asesor-pie .btn { justify-content: center; }

/* ---------- Repuestos y accesorios (servicios.html) ---------- */
.repuestos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.repuesto { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--linea); }
.repuesto h3 { color: var(--azul); font-size: var(--t-md); }
.repuesto p { font-size: var(--t-sm); }
.repuesto small { color: var(--suave); font-size: var(--t-xs); }
.repuesto .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Subpáginas por modelo (las cuatro de Productos en la web anterior) ---------- */
/* Portada como en la web anterior: banda con el nombre del equipo y, debajo, sus fotos en una oficina a todo lo ancho */
.modelo-banda { position: relative; padding: clamp(18px, 2.4vw, 28px) 0 clamp(20px, 2.6vw, 30px); background: var(--azul); color: #fff; text-align: center; }
.modelo-banda::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--rojo) 0 33.34%, var(--granate) 33.34% 66.67%, var(--gris) 66.67% 100%); }
.modelo-banda .migas { justify-content: center; color: rgba(255, 255, 255, .75); }
.modelo-banda .migas a, .modelo-banda .migas [aria-current] { color: #fff; }
.modelo-banda h1 { margin-top: 6px; color: #fff; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; }
.portada-carrusel { position: relative; aspect-ratio: 2400 / 984; max-height: 640px; width: 100%; overflow: hidden; background: var(--papel); }
.portada-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.portada-foto.activa { opacity: 1; }
.portada-flecha { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border-radius: 0; background: #fff; color: var(--azul); transition: background-color .2s, color .2s; }
.portada-flecha:hover { background: var(--azul); color: #fff; }
.portada-flecha svg { width: 22px; height: 22px; }
.portada-flecha.izq { left: 0; }
.portada-flecha.der { right: 0; }
.portada-puntos { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.portada-puntos button { width: 22px; height: 4px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 3px rgba(11, 22, 56, .4); transition: width .3s var(--facil), background-color .2s; }
.portada-puntos button[aria-current="true"] { width: 44px; background: var(--rojo); }
/* Presentación del equipo: galería de fotos a la izquierda; nombre, bajada, datos y botones a la derecha */
.modelo-presenta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.modelo-galeria .galeria-principal { aspect-ratio: 6 / 5; cursor: default; }
.modelo-galeria .miniaturas { justify-content: center; }
.modelo-bajada { margin-top: 14px; color: var(--tinta); font-size: var(--t-md); font-weight: 700; line-height: 1.5; }
.modelo-presenta .datos-clave { margin-top: 22px; }
.modelo-compra { margin-top: 26px; }
.modelo-tienda { margin-top: 16px; font-size: var(--t-sm); }
.modelo-cuerpo { display: grid; grid-template-columns: minmax(0, 860px); }
.modelo-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
.modelo-h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; color: var(--azul); }
.modelo-contacto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.modelo-contacto li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--linea); font-size: var(--t-sm); line-height: 1.5; }
.modelo-contacto svg { width: 20px; height: 20px; color: var(--rojo); }
.modelo-contacto small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.modelo-contacto a { color: var(--azul); font-weight: 700; }

/* Tarjetas de los plotters Epson en productos.html: cada una lleva a su subpágina de modelo */
.grupo-t { margin: 6px 0 14px; font-size: var(--t-md); color: var(--azul); }
.modelos-grid + .grupo-t { margin-top: 34px; }
.modelos-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.modelo-tarjeta { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea); transition: border-color .25s; }
.modelo-tarjeta:hover { border-color: var(--linea-2); }
.modelo-tarjeta-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; }
.modelo-tarjeta-img img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.modelo-tarjeta-txt { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 4px 16px 16px; }
.modelo-tarjeta h3 { font-size: var(--t-md); line-height: 1.25; }
.modelo-tarjeta h3 a { color: var(--azul); transition: color .2s; }
.modelo-tarjeta h3 a:hover { color: var(--granate); }
.modelo-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.modelo-chips { gap: 0; row-gap: 4px; }
.modelo-chips li { padding: 0 8px; border-left: 1px solid var(--linea-2); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--tinta-2); }
.modelo-chips li:first-child { padding-left: 0; border-left: 0; }
.modelo-tarjeta p { font-size: var(--t-xs); color: var(--suave); }
.modelo-tarjeta-pie { display: grid; gap: 10px; margin-top: auto; padding-top: 6px; }
.modelo-precio { color: var(--rojo); font-size: 1.35rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.modelo-precio small { display: block; color: var(--suave); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.modelo-tarjeta-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modelo-tarjeta-btns .btn { justify-content: center; padding-inline: 8px; }
.modelo-tarjeta-btns.uno { grid-template-columns: minmax(0, 1fr); }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  .modelos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-marco { min-height: 520px; }
  .hx-texto { padding-block: 32px; }
  .cats-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carrusel { grid-auto-columns: minmax(230px, calc((100% - 48px) / 4)); }
}
@media (max-width: 1024px) {
  .modelos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modelo-presenta, .modelo-cuerpo, .modelo-specs { grid-template-columns: minmax(0, 1fr); }
  .modelo-contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repuestos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipo { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .hx-marco { min-height: 0; }
  .hx-slide { grid-template-columns: 1fr; align-content: start; }
  .hx-fondo { position: relative; z-index: 0; aspect-ratio: 16 / 9; }
  .hx-fondo.contiene img { padding: 4% 10%; }
  .hx-texto { justify-content: flex-start; padding: 22px 24px 30px; }
  .hx-tab { margin-left: -24px; }
  .hx-tab span { padding-left: 24px; }
  .hx-nav { right: 14px; bottom: auto; top: calc(56.25cqw - 54px); }
  .duo-promo, .split, .split.invertido, .oferta-band, .intro-cab { grid-template-columns: 1fr; }
  .split.invertido .split-media { order: 0; }
  .ayuda { grid-template-columns: 1fr; }
  .ayuda .botones { flex-direction: row; }
  .carrusel { grid-auto-columns: minmax(230px, 40%); }
}
@media (max-width: 680px) {
  .portada { padding-top: 12px; }
  .modelos-grid { grid-template-columns: minmax(0, 1fr); }
  .modelo-contacto { grid-template-columns: minmax(0, 1fr); }
  .repuestos { grid-template-columns: 1fr; }
  .hx-fondo { aspect-ratio: 5 / 4; }
  .hx-texto { padding: 18px 18px 24px; }
  .hx-tab { margin-left: -18px; font-size: 14px; }
  .hx-tab span { padding-left: 18px; }
  .hx .hx-titulo { font-size: 1.75rem; }
  .hx-lead { font-size: var(--t-sm); }
  .hx-datos li { padding: 0; border: 0; }
  .hx-datos li:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--suave); }
  .hx-compra { gap: 12px; }
  .hx-ctas { width: 100%; }
  .hx-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .hx-nav { right: 10px; top: calc(80cqw - 50px); }
  .cats-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .showroom { grid-template-columns: 1fr; }
  .showroom > img { min-height: 0; aspect-ratio: 16 / 10; }
  .pasos-test { grid-template-columns: 1fr; }
  .carrusel { grid-auto-columns: 72%; }
  .mini-prod { grid-template-columns: 52px 1fr; }
  .mini-prod img { width: 52px; height: 52px; }
  .mini-prod .num { grid-column: 2; margin-top: -6px; }
  .serv-item { grid-template-columns: 40px 1fr; }
  .serv-item .dato { grid-column: 2; }
  .clientes img { height: 52px; }
  .seccion { padding-block: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-slide { transition: none; }
  .imprime { clip-path: none !important; }
}
.hx-slide.activo { cursor: pointer; }
.hx-slide .hx-compra { cursor: auto; }