/* Catálogo Richmond — estilos de producción. Colores oficiales (manual 2.3). */
.rh-cat-title{
  max-width:1240px; margin:0 auto 20px; padding:0;
  font-family:'Montserrat',-apple-system,"Segoe UI",sans-serif; font-weight:800; letter-spacing:-.02em;
  color:#3A3B3E; font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.1;
}
/* Tokens de marca. Van en TODAS las raíces del shortcode, no solo en .rh-cat:
   el toast, la ficha rápida y el scrim se imprimen como HERMANOS del grid (van
   fixed, fuera del flujo), y las custom properties solo heredan hacia abajo.
   Declarándolas solo en .rh-cat, `background:var(--ink)` del toast quedaba sin
   resolver → fondo transparente + texto blanco = invisible sobre la página. */
.rh-cat, .rh-ficha, .rh-scrim, .rh-toast{
  --red:#FE3B1F; --orange:#F18A00; --gray:#54565A; --rust:#AC441E;
  --ink:#3A3B3E; --body:#5F6064; --muted:#9A9A9E; --line:#ECEBE8; --soft:#F7F6F4; --paper:#fff;
  --ok:#1F9D57; --warn:#C9861F; --off:#C0392B;
  --font:'Roboto',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --head:'Montserrat',-apple-system,"Segoe UI",sans-serif;
}
.rh-cat{
  display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:start;
  font-family:var(--font); color:var(--body); max-width:1240px; margin:0 auto;
}
.rh-cat *{box-sizing:border-box}
/* Sticky + scroll propio: sin el max-height la columna de filtros era más alta
   que la pantalla y quedaba cortada (había que bajar por todos los productos
   para ver el final de los filtros). */
.rh-cat__filters{position:sticky; top:20px; max-height:calc(100vh - 40px); overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:16px; padding:6px 18px 16px; background:var(--paper);
  scrollbar-width:thin; scrollbar-color:#D8D6D2 transparent}
.rh-cat__filters::-webkit-scrollbar{width:8px}
.rh-cat__filters::-webkit-scrollbar-thumb{background:#D8D6D2; border-radius:8px}
.rh-cat__filters::-webkit-scrollbar-track{background:transparent}
.rh-fg{border-bottom:1px solid var(--line); padding:15px 0}
.rh-fg:last-child{border-bottom:0}
.rh-fg h4{font-family:var(--head); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 10px; display:flex; align-items:center; gap:6px}
.rh-lock{font-size:.58rem; color:var(--red); border:1px solid #f6b3a6; border-radius:10px; padding:1px 6px}
.rh-opt{display:flex; align-items:center; gap:8px; padding:4px 0; font-size:.88rem; color:var(--body); cursor:pointer}
/* Los filtros solo-cliente se ocultan con el atributo [hidden]; sin estas reglas
   el display de arriba le gana al navegador y se verían igual (mismo tropiezo que
   con el botón "Cargar más"). */
.rh-fg[hidden], .rh-opt[hidden]{display:none}
.rh-opt input{accent-color:var(--red)}
/* Filtro de precio (privado, como el material): tres rangos de un toque + un
   rango a mano. Los rangos son texto plano, no casillas: se aplica uno solo. */
.rh-precio__rangos{display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:12px}
.rh-cat .rh-cat__filters .rh-precio__r{background:0; border:0; padding:3px 0; cursor:pointer; text-align:left;
  font-family:var(--font); font-size:.88rem; color:var(--body); line-height:1.3}
.rh-cat .rh-cat__filters .rh-precio__r:hover{color:var(--red); text-decoration:underline}
.rh-cat .rh-cat__filters .rh-precio__r.is-on{color:var(--red); font-weight:700}
/* Marca el rango activo sin desplazar el texto de los otros dos. */
.rh-precio__r.is-on::before{content:"✓ "; margin-left:-1em}

.rh-precio{display:flex; align-items:center; gap:6px}
.rh-cat .rh-cat__filters .rh-precio input{box-sizing:border-box; width:100%; min-width:0; min-height:0; height:auto;
  margin:0; padding:7px 9px; border:1.5px solid var(--line); border-radius:8px; background:var(--paper);
  font-family:var(--font); font-size:.84rem; line-height:1.3; letter-spacing:normal; text-transform:none; color:var(--ink)}
/* Misma especificidad que la regla de arriba + :focus, o el borde normal le
   ganaría al del foco y el campo no se marcaría al escribir. */
.rh-cat .rh-cat__filters .rh-precio input:focus{outline:0; border-color:var(--red); box-shadow:0 0 0 3px rgba(254,59,31,.13)}
/* Se le saca la flechita de incremento: al lado del botón de aplicar confunde. */
.rh-precio input::-webkit-outer-spin-button, .rh-precio input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.rh-precio input[type=number]{-moz-appearance:textfield; appearance:textfield}
.rh-precio__sep{color:var(--muted); flex:none}
.rh-cat .rh-cat__filters .rh-precio__go{flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border:1.5px solid var(--line); border-radius:8px; background:var(--soft);
  color:var(--gray); cursor:pointer; transition:.15s}
.rh-cat .rh-cat__filters .rh-precio__go:hover{border-color:var(--red); background:var(--red); color:#fff}
/* Killers universales. Van con !important a propósito y solo sobre estas cinco
   propiedades: son las que rompen la CAJA de un control (mayúsculas y espaciado
   ensanchan el texto; los min/max fuerzan tamaños que no pedimos) y ninguna
   regla nuestra las usa, así que no nos pisamos a nosotros mismos. Un tema puede
   declararlas con !important —Elementor lo hace— y sin esto no habría forma de
   ganarle desde acá. */
.rh-cat button, .rh-ficha button{
  text-transform:none !important; letter-spacing:normal !important; word-spacing:normal !important;
  min-width:0 !important; min-height:0 !important; max-width:100% !important;
}

/* ---- Blindaje contra el tema ------------------------------------------------
   Elementor y Hello Elementor le aplican a TODO <button> mayúsculas, espaciado
   entre letras, un tamaño de fuente propio y alturas mínimas. Dentro de la
   columna de filtros eso hacía que "Inicia sesión para filtrar por precio" no
   entrara en su caja y se saliera del recuadro.
   La especificidad está calculada: (0,2,1) le gana a cualquier `button` suelto o
   `.tema button` del tema, y los componentes de abajo van con (0,3,0) para
   ganarle a este blindaje. No se toca width, color ni borde: solo lo que rompe
   la caja. */
.rh-cat .rh-cat__filters button{
  box-sizing:border-box; max-width:100%; min-width:0; min-height:0;
  font-family:var(--font); font-size:.8rem; font-style:normal;
  text-transform:none; letter-spacing:normal; line-height:1.35;
  white-space:normal; overflow-wrap:anywhere; word-break:normal;
  box-shadow:none; text-shadow:none;
}

/* Puerta de un filtro privado: el grupo se ve, las opciones no. Que el título
   siga ahí es el punto — si se escondiera entero, el visitante creería que el
   catálogo no se puede filtrar por precio ni por material. */
.rh-cat .rh-cat__filters .rh-fgate{
  display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; cursor:pointer;
  padding:10px 12px; border:1px dashed #f6b3a6; border-radius:10px; background:#FFF6F4;
  font-family:var(--font); font-size:.8rem; line-height:1.35; color:var(--red); transition:.15s}
.rh-cat .rh-cat__filters .rh-fgate:hover{background:var(--red); border-color:var(--red); border-style:solid; color:#fff}
/* El candado no se encoge ni se estira, y queda a la altura del primer renglón
   aunque el texto ocupe dos. */
.rh-cat .rh-cat__filters .rh-fgate svg{flex:0 0 auto; margin-top:2px}
.rh-cat .rh-cat__filters .rh-fgate span{flex:1; min-width:0}

.rh-sws{display:flex; flex-wrap:wrap; gap:2px}
.rh-sw{display:inline-block; width:22px; height:22px; border-radius:50%; border:2px solid var(--line); cursor:pointer; margin:3px}
.rh-sw[aria-pressed="true"]{border-color:var(--red); box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red)}
.rh-cat .rh-cat__filters .rh-clear:hover{background:0; color:#DB2E13; text-decoration:underline}
.rh-cat .rh-cat__filters .rh-clear{margin-top:12px; background:0; border:0; padding:0; color:var(--red);
  cursor:pointer; font-size:.78rem; font-family:var(--head); text-align:left}
/* "Ver más": las opciones extra quedan ocultas hasta abrir el grupo. */
.rh-opt--extra{display:none}
.rh-fg.is-open .rh-opt--extra{display:flex}
.rh-cat .rh-cat__filters .rh-vermas:hover{background:0; color:#DB2E13}
.rh-cat .rh-cat__filters .rh-vermas{margin-top:6px; background:0; border:0; padding:0; color:var(--red);
  cursor:pointer; font-size:.76rem; font-family:var(--head); text-decoration:underline; text-align:left}

.rh-cat__bar{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.rh-search{flex:1; display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; background:var(--paper)}
.rh-search:focus-within{border-color:var(--red); box-shadow:0 0 0 4px rgba(254,59,31,.14)}
.rh-search input{border:0; outline:0; background:0; width:100%; font-family:var(--font); font-size:.95rem; color:var(--ink)}
.rh-count{font-size:.85rem; color:var(--muted); white-space:nowrap}

/* min-width:0 evita que un hijo ancho (ej. el paginador) infle la columna 1fr
   del grid y estire las tarjetas ("productos gigantes"). */
.rh-cat__main{min-width:0}
.rh-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; min-width:0}
.rh-card{border:1px solid var(--line); border-radius:16px; background:var(--paper); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s,border-color .2s}
.rh-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(43,43,46,.2); border-color:#f6b3a6}
/* Fondo BLANCO (no el gris cálido): las fotos de los proveedores vienen en JPG
   con fondo blanco, así que sobre gris se veía un recuadro blanco recortado
   alrededor de cada producto. Misma decisión que en la página de Servicios; la
   separación la marca la línea de abajo. */
.rh-card__img{aspect-ratio:4/3; background:var(--paper); border-bottom:1px solid var(--line); display:grid; place-items:center; position:relative; color:var(--gray); font-family:var(--head); font-weight:800; font-size:1.6rem; overflow:hidden}
/* La foto va ABSOLUTA dentro de la caja. Si queda en el flujo, su `height:100%`
   NO resuelve: el alto de la caja viene de `aspect-ratio` pero la fila del grid
   se dimensiona por el contenido, así que la imagen se dibujaba a su tamaño
   natural (ej. 244x800 de un bolígrafo → 956 px de alto) y `overflow:hidden` la
   recortaba. Eso era el "producto con mucho zoom": `object-fit:contain` no hacía
   nada porque la caja de la imagen ya tenía su misma proporción. En posición
   absoluta el 100% se mide contra la caja —que sí tiene alto definido— y la foto
   entra entera. */
.rh-cat .rh-card__pic{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px}
/* La etiqueta y el corazón van ANTES de la foto en el HTML: sin z-index, la foto
   (ahora posicionada) les pasaría por encima. */
.rh-tag{position:absolute; top:10px; left:10px; z-index:2; font-family:var(--head); font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 8px; border-radius:6px; background:var(--orange); color:#fff}
.rh-tag--of{background:var(--red)}
.rh-cat .rh-heart{position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; padding:0; border-radius:50%; background:rgba(255,255,255,.85); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; line-height:1; cursor:pointer; color:var(--body)}
.rh-heart svg{display:block; width:16px; height:16px}
/* Marcado = corazón relleno. */
.rh-heart[aria-pressed="true"] svg{fill:currentColor}
/* Hello Elementor pinta CUALQUIER <button> de fucsia (#c36) al pasar el mouse
   (su reset.css). Todo botón nuestro declara su propio :hover para taparlo. */
.rh-cat .rh-heart:hover{background:#fff; border-color:#f6b3a6; color:var(--red)}
.rh-heart[aria-pressed="true"]{color:var(--red)}
.rh-card__b{padding:14px; display:flex; flex-direction:column; gap:6px; flex:1}
.rh-card__b h3{font-family:var(--head); font-size:.98rem; color:var(--ink); margin:0; line-height:1.25}
/* El título es un enlace real (SEO + clic derecho/rueda del mouse), pero se ve
   como texto: el resto de la tarjeta abre el mismo producto por JS. */
.rh-card__t{color:inherit; text-decoration:none}
.rh-card:hover .rh-card__t{color:var(--red)}
.rh-sku{font-family:ui-monospace,Menlo,monospace; font-size:.68rem; color:var(--muted)}
.rh-cc{display:flex; gap:5px; margin-top:2px}
.rh-cc span{width:15px; height:15px; border-radius:50%; border:1px solid var(--line)}
/* Color que estás filtrando: se marca y se muestra primero en la tarjeta. */
.rh-cc span.is-on{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--red); border-color:transparent}
.rh-prow{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:8px}
/* Urgencia por existencias reales. Naranja y no rojo: el rojo de la marca ya es
   el color de las acciones, y si todo grita nada grita. */
/* align-self: la tarjeta es una columna flex y sin esto la etiqueta se estiraba
   de lado a lado, que la hacía parecer una barra de error. */
.rh-urg{display:inline-block; align-self:flex-start; width:fit-content; margin-top:6px; padding:2px 8px; border-radius:20px;
  font-family:var(--head); font-weight:700; font-size:.66rem; letter-spacing:.02em;
  background:#FFF3E2; color:#B36B00}
.rh-urg--alta{background:#FDE9E5; color:#C0392B}
.rh-urg--dem{background:#EAF6EF; color:#1F7A46}
/* Inventario holgado: es un dato, no una alarma. Gris neutro para que el naranja
   de "solo quedan N" siga leyéndose como urgencia y no se devalúe. */
.rh-urg--ok{background:#F2F1EF; color:#5F6064; font-weight:600}
.rh-price{font-family:var(--head); font-weight:800; color:var(--ink)}
.rh-price small{font-weight:500; font-size:.7rem; color:var(--muted)}
.rh-locked{font-family:ui-monospace,monospace; font-size:.72rem; color:var(--muted)}
.rh-av{font-family:ui-monospace,monospace; font-size:.64rem; font-weight:700; padding:4px 8px; border-radius:20px}
.rh-av.ok{color:var(--ok); background:rgba(31,157,87,.12)}
.rh-av.warn{color:var(--warn); background:rgba(201,134,31,.14)}
.rh-av.off{color:var(--off); background:rgba(192,57,43,.12)}
.rh-cat .rh-q{font-family:var(--head); font-weight:700; font-size:.78rem; padding:7px 12px; border-radius:8px; border:1px solid var(--orange); background:var(--orange); color:#fff; cursor:pointer; transition:background .15s, border-color .15s}
.rh-cat .rh-q:hover{background:#D97B00; border-color:#D97B00; color:#fff}
.rh-empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:56px 0}

/* Scroll infinito: cargador con los 4 puntos de la marca (rojo/naranja/terracota/gris). */
.rh-more{display:none; justify-content:center; align-items:center; gap:9px; padding:34px 0 10px}
.rh-more.on{display:flex}
.rh-more span{width:12px; height:12px; border-radius:50%; animation:rh-pulse 1s infinite ease-in-out both}
.rh-more span:nth-child(1){background:var(--red);     animation-delay:-.32s}
.rh-more span:nth-child(2){background:var(--orange);  animation-delay:-.16s}
.rh-more span:nth-child(3){background:var(--rust);    animation-delay:0s}
.rh-more span:nth-child(4){background:var(--gray);    animation-delay:.16s}
.rh-more__txt{margin-left:8px; font-family:var(--head); font-size:.82rem; color:var(--muted); animation:none; width:auto; height:auto; border-radius:0}
@keyframes rh-pulse{0%,80%,100%{transform:scale(.35); opacity:.45} 40%{transform:scale(1); opacity:1}}
#rh-sentinel{height:1px}
.rh-end{text-align:center; color:var(--muted); font-size:.82rem; padding:26px 0 6px}

/* Pausa del scroll infinito (tras 3 tandas automáticas). */
.rh-pause{display:flex; flex-direction:column; align-items:center; gap:8px; padding:30px 0 6px}
/* OJO: sin esto el `display:flex` de arriba le gana al atributo [hidden] del
   navegador y el botón "Cargar más" quedaba SIEMPRE visible, incluso al final. */
.rh-pause[hidden]{display:none}
.rh-cat .rh-pause__btn{font-family:var(--head); font-weight:700; font-size:.9rem; color:#fff; background:var(--red); border:0; border-radius:10px; padding:.85em 1.6em; cursor:pointer; transition:background .15s, transform .15s}
.rh-cat .rh-pause__btn:hover{background:#e42f16; transform:translateY(-1px)}
.rh-pause__hint{margin:0; font-size:.8rem; color:var(--muted)}

/* ficha */
.rh-scrim{position:fixed; inset:0; background:rgba(43,43,46,.5); z-index:9998}
.rh-ficha{position:fixed; top:0; right:0; height:100%; width:min(540px,94vw); background:var(--paper); z-index:9999; transform:translateX(100%); transition:transform .3s; overflow-y:auto; box-shadow:-20px 0 60px -20px rgba(0,0,0,.3)}
.rh-ficha.on{transform:none}
.rh-ficha__x{position:absolute; top:14px; right:14px; width:36px; height:36px; padding:0; border-radius:9px;
  border:1px solid var(--line); background:var(--paper); color:var(--body); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer}
.rh-ficha__x:hover{background:var(--paper); border-color:var(--red); color:var(--red)}
.rh-ficha__hero{aspect-ratio:16/11; background:var(--soft); display:grid; place-items:center; font-family:var(--head); font-weight:800; font-size:2rem; color:var(--gray)}
.rh-ficha__b{padding:24px}
.rh-ficha__b h2{font-family:var(--head); color:var(--ink); font-size:1.4rem; margin:.2em 0}
.rh-attr{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0}
.rh-attr div{border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.rh-attr .k{font-family:ui-monospace,monospace; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.rh-attr .v{color:var(--ink); font-weight:600; font-size:.9rem; margin-top:2px}
.rh-tech{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.rh-tech span{font-family:ui-monospace,monospace; font-size:.68rem; padding:5px 9px; border-radius:16px; background:rgba(254,59,31,.09); color:var(--rust)}
.rh-gate{border:1px dashed #f6b3a6; border-radius:12px; padding:16px; background:rgba(254,59,31,.05); font-size:.88rem; margin:16px 0}
.rh-cat .rh-btn:hover{background:#DB2E13; color:#fff}
.rh-cat .rh-btn{display:inline-flex; align-items:center; justify-content:center; font-family:var(--head); font-weight:700; padding:.8em 1.3em; border-radius:9px; border:0; background:var(--red); color:#fff; cursor:pointer; width:100%}

.rh-toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:.88rem; opacity:0; pointer-events:none; transition:.25s; z-index:10000}
.rh-toast.on{opacity:1; transform:translateX(-50%)}

@media (max-width:900px){.rh-cat{grid-template-columns:1fr}.rh-cat__filters{position:static; max-height:none; overflow:visible}.rh-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rh-grid{grid-template-columns:1fr}.rh-attr{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rh-card,.rh-ficha,.rh-toast{transition:none}.rh-more span{animation:none;opacity:.7}}