/* Secciones de productos del home [richmond_productos] — colores oficiales (2.3). */
.rh-prods{
  --red:#FE3B1F; --orange:#F18A00; --gray:#54565A; --ink:#3A3B3E; --body:#5F6064; --muted:#9A9A9E; --line:#ECEBE8; --soft:#F7F6F4; --paper:#fff;
  --head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font:'Roboto',-apple-system,"Segoe UI",sans-serif;
  max-width:1240px; margin:0 auto; font-family:var(--font); color:var(--body);
}
.rh-prods *{box-sizing:border-box}
.rh-prods__head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px}
.rh-prods__title{font-family:var(--head); font-weight:800; letter-spacing:-.02em; color:var(--ink); font-size:1.5rem; margin:0}
.rh-prods__cta{font-family:var(--head); font-size:.85rem; font-weight:700; color:var(--red); text-decoration:none; white-space:nowrap}
.rh-prods__cta:hover{text-decoration:underline}

/* La grilla se adapta al ANCHO REAL del contenedor, no a un número fijo de
   columnas: dentro de una columna angosta de Elementor (33%) un repeat(4,1fr)
   dejaba tarjetas de ~85px. `columnas` se respeta siempre que entren con un
   tamaño digno; el piso de 160px es a propósito BAJO para no agrandar secciones
   que ya se veían bien, y solo actúa cuando el contenedor es muy angosto. */
.rh-prods__grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(max(160px, calc((100% - (var(--rh-cols,4) - 1) * 18px) / var(--rh-cols,4))), 1fr));
  justify-content:center;
}

.rh-prod{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s, border-color .2s}
.rh-prod:hover{transform:translateY(-4px); box-shadow:0 22px 44px -20px rgba(43,43,46,.22); border-color:#f6b3a6}
.rh-prod__img{aspect-ratio:1/1; background:var(--paper); border-bottom:1px solid var(--line); position:relative; display:grid; place-items:center; overflow:hidden; color:var(--gray); font-family:var(--head); font-weight:800; font-size:1.8rem}
/* Degradado suave de marca (rojo→naranja sobre el gris cálido), igual que las
   tarjetas del prototipo `design/home-richmond.html`. Es OPT-IN vía
   [richmond_productos estilo="degradado"]: el CSS es compartido por todas las
   secciones, así que si fuera el default cambiaría bloques ya aprobados. */
.rh-prods--grad .rh-prod__img{background:linear-gradient(135deg,#F8E0DA,#F6E7D2)}
/* Absoluta a propósito: en el flujo, el `height:100%` no resuelve contra un alto
   que viene de `aspect-ratio` y la foto se dibujaba a su tamaño natural, recortada
   por overflow:hidden (se veía "con mucho zoom" en las fotos altas y angostas). */
.rh-prods .rh-prod__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:14px}
.rh-prod__tag{position:absolute; top:10px; left:10px; z-index:2; font-family:var(--head); font-size:.58rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:6px; background:var(--orange); color:#fff}
.rh-prod__tag--of{background:var(--red)}
.rh-prod__b{padding:14px; display:flex; flex-direction:column; gap:5px; flex:1}
.rh-prod__name{font-family:var(--head); font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rh-prod__sku{font-family:ui-monospace,Menlo,monospace; font-size:.66rem; color:var(--muted)}
.rh-prod__price{font-family:var(--head); font-weight:800; color:var(--ink); margin-top:auto; padding-top:4px}
.rh-prod__price small{font-weight:500; font-size:.7em; color:var(--muted)}
/* Sin precio a la vista, el lugar lo ocupa la invitación a personalizar. */
.rh-prod__cta2{display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:auto;
  height:34px; padding:0 14px; border-radius:9px; border:1.5px solid var(--red); background:#fff;
  font-family:var(--head); font-weight:700; font-size:.78rem; line-height:1; color:var(--red);
  white-space:nowrap; transition:background .16s, color .16s}
.rh-prod__cta2 svg{flex:none; transition:transform .16s}
.rh-prod:hover .rh-prod__cta2{background:var(--red); color:#fff}
.rh-prod:hover .rh-prod__cta2 svg{transform:translateX(3px)}

/* ---- Mosaicos de temporada [richmond_temporadas] ----
   Mismo diseño que las tarjetas del home, pero enlazadas al catálogo filtrado.
   Los 3 degradados salen de los colores oficiales (manual 2.3). */
.rh-temp{
  --red:#FE3B1F; --orange:#F18A00; --gray:#54565A; --rust:#AC441E; --dark:#2B2B2E;
  --head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  max-width:1240px; margin:0 auto; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
}
.rh-temp *{box-sizing:border-box}
.rh-temp__card{
  display:flex; flex-direction:column; min-height:150px;
  padding:26px 24px; border-radius:18px; color:#fff;
  transition:transform .2s, box-shadow .2s;
}
.rh-temp__card:hover{transform:translateY(-4px); box-shadow:0 22px 44px -20px rgba(43,43,46,.4)}
.rh-temp__card--1{background:linear-gradient(140deg,var(--red),var(--rust))}
.rh-temp__card--2{background:linear-gradient(140deg,var(--orange),var(--red))}
.rh-temp__card--3{background:linear-gradient(140deg,var(--gray),var(--dark))}
/* Sin productos: se comporta como el mosaico original (texto abajo). */
.rh-temp__card--vacio{justify-content:flex-end}

.rh-temp__head{display:block; color:#fff; text-decoration:none}
.rh-temp__eyebrow{font-family:ui-monospace,Menlo,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.85}
.rh-temp__title{color:#fff; font-family:var(--head); font-weight:800; font-size:22px; line-height:1.2; margin:6px 0 0}
.rh-temp__head:hover .rh-temp__title{text-decoration:underline}

/* Productos DENTRO del mosaico: miniatura sobre fondo blanco para que se lean
   sobre el degradado. */
/* Una columna por producto, todas iguales: `auto-flow:column` se adapta solo a
   cuántos productos haya (2, 3 o 4) sin hardcodear el número. */
.rh-temp__prods{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:10px; margin:18px 0 0}
.rh-temp__prod{text-decoration:none; color:#fff; display:flex; flex-direction:column; gap:6px; min-width:0}
.rh-temp__pimg{position:relative; display:grid; place-items:center; aspect-ratio:1/1; background:#fff; border-radius:12px; overflow:hidden}
.rh-temp .rh-temp__pimg img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px}
.rh-temp__pph{font-family:var(--head); font-weight:800; font-size:1.3rem; color:var(--gray)}
.rh-temp__pname{font-size:.72rem; line-height:1.25; color:#fff; opacity:.95;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rh-temp__prod:hover .rh-temp__pimg{box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.rh-temp__prod--skel .rh-temp__pimg,
.rh-temp__prod--skel{background:rgba(255,255,255,.25); border-radius:12px; aspect-ratio:1/1; display:block}

.rh-temp__cta{margin-top:16px; align-self:flex-start; color:#fff; font-family:var(--head); font-weight:700;
  font-size:.8rem; text-decoration:none; opacity:.9; border-bottom:1px solid rgba(255,255,255,.5)}
.rh-temp__cta:hover{opacity:1}

/* ---- Tarjetas de solución [richmond_soluciones] ----
   Mismo mosaico, más un párrafo con el caso de uso. Los textos tienen largos
   muy distintos ("Haz que tu marca siga presente…" vs. el de Cultura), así que
   la fila de productos se empuja al fondo (margin-top:auto) y las tres tarjetas
   alinean sus miniaturas y sus botones a la misma altura. */
.rh-temp--sol{align-items:stretch}
.rh-temp__text{margin:10px 0 0; font-size:.88rem; line-height:1.5; color:#fff; opacity:.9}
.rh-temp__card--sol{min-height:300px}
.rh-temp__card--sol .rh-temp__prods{margin-top:auto; padding-top:20px; gap:8px}
/* Con 4 productos la columna es angosta y los nombres son largos ("PLAYERA
   CUELLO REDONDO VITIM"): un punto menos de cuerpo para que entren dos líneas
   sin cortar en la primera palabra. */
.rh-temp__card--sol .rh-temp__pname{font-size:.68rem}
@media (prefers-reduced-motion:reduce){.rh-temp__card{transition:none}}

.rh-prod--skel{pointer-events:none}
.rh-prod--skel .rh-prod__b{min-height:64px}

/* Sin media queries de columnas: el auto-fill de arriba ya se adapta solo, tanto
   al ancho de pantalla como al del contenedor donde se inserte el shortcode. */
@media (max-width:480px){ .rh-prods__grid{grid-template-columns:1fr} }