/* Vidriera de destacados del Home — colores oficiales (manual 2.3). */
.rh-dest{
  --red:#FE3B1F; --red-d:#DB2E13; --gray:#54565A; --ink:#3A3B3E; --muted:#9A9A9E; --line:#ECEBE8; --soft:#F7F6F4; --paper:#fff; --orange:#F18A00; --rust:#AC441E;
  --head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font:'Roboto',-apple-system,"Segoe UI",sans-serif;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.rh-dest *{box-sizing:border-box}
.rh-dest__card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s, box-shadow .18s, border-color .18s}
.rh-dest__card:hover{transform:translateY(-3px); box-shadow:0 18px 34px -18px rgba(43,43,46,.25); border-color:#f6b3a6}
.rh-dest__img{position:relative; aspect-ratio:16/10; background:var(--paper); border-bottom:1px solid var(--line);
  display:grid; place-items:center; overflow:hidden; font-family:var(--head); font-weight:800; font-size:1.5rem; color:var(--gray)}
/* Absoluta: con la foto en el flujo, el `height:100%` no resuelve contra el alto
   que da `aspect-ratio` y la imagen se dibujaba a su tamaño natural, recortada
   (el efecto "producto con mucho zoom" de las fotos altas y angostas). */
.rh-dest .rh-dest__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px}
.rh-dest__tag{position:absolute; top:8px; left:8px; z-index:2; font-family:var(--head); font-size:.56rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:5px; background:var(--orange); color:#fff}
.rh-dest__tag--of{background:var(--red)}
.rh-dest__b{padding:11px 12px; display:flex; flex-direction:column; gap:3px}
.rh-dest__name{font-family:var(--head); font-weight:700; font-size:.86rem; color:var(--ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rh-dest__meta{font-family:ui-monospace,Menlo,monospace; font-size:.64rem; color:var(--muted)}
.rh-dest__price{font-family:var(--head); font-weight:800; font-size:.82rem; color:var(--ink); margin-top:2px}
.rh-dest__price small{font-weight:500; font-size:.62rem; color:var(--muted)}
/* Sin precio a la vista, el lugar lo ocupa la invitación a personalizar. Un
   renglón, altura fija y sin cortes: es un botón, no una nota al pie. */
.rh-dest__cta2{display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:8px;
  height:34px; padding:0 14px; border-radius:9px; border:1.5px solid var(--red); background:var(--paper);
  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-dest__cta2 svg{flex:none; transition:transform .16s}
.rh-dest__card:hover .rh-dest__cta2, .rh-destb__big:hover .rh-dest__cta2, .rh-destb__mini:hover .rh-dest__cta2{
  background:var(--red); color:#fff}
.rh-dest__card:hover .rh-dest__cta2 svg{transform:translateX(3px)}
/* En las tarjetas chicas del bloque B el botón entero no entra: ahí va como
   texto con flecha, sin el recuadro. */
.rh-destb__mini .rh-dest__cta2{height:auto; padding:0; border:0; background:0; margin-top:4px; font-size:.72rem}
.rh-destb__mini:hover .rh-dest__cta2{background:0; color:#DB2E13}

/* skeleton / placeholder */
.rh-dest__card--skel{pointer-events:none}
.rh-dest__card--skel .rh-dest__img{background:
  linear-gradient(45deg,transparent 49.4%,#e2e0dc 49.4%,#e2e0dc 50.6%,transparent 50.6%),
  linear-gradient(-45deg,transparent 49.4%,#e2e0dc 49.4%,#e2e0dc 50.6%,transparent 50.6%),var(--soft)}
.rh-dest__card--skel .rh-dest__name,
.rh-dest__card--skel .rh-dest__meta{display:block; height:11px; margin:12px 12px 0; border-radius:3px; background:#eee}
.rh-dest__card--skel .rh-dest__meta{width:55%; margin-bottom:12px}

@media (max-width:520px){ .rh-dest{grid-template-columns:1fr 1fr} }

/* ===== Strip de categorías [richmond_categorias] ===== */
.rh-cats{--red:#FE3B1F;--ink:#3A3B3E;--muted:#9A9A9E;--line:#ECEBE8;
  --head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  max-width:1240px;margin:0 auto;font-family:var(--head)}
.rh-cats *{box-sizing:border-box}
.rh-cats__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.rh-cats__title{font-family:var(--head);font-weight:800;letter-spacing:-.02em;color:var(--ink);font-size:1.35rem;margin:0}
.rh-cats__all{font-family:var(--head);font-size:.82rem;font-weight:700;color:var(--red);text-decoration:none;white-space:nowrap}
.rh-cats__all:hover{text-decoration:underline}
.rh-cats__row{display:flex;gap:10px;flex-wrap:wrap}
.rh-cats__pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:1px solid var(--line);border-radius:22px;
  color:var(--ink);font-family:var(--head);font-weight:600;font-size:.9rem;text-decoration:none;background:#fff;transition:.16s;white-space:nowrap}
.rh-cats__pill svg{width:15px;height:15px;flex:0 0 auto}
.rh-cats__pill:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}
.rh-cats__pill::first-letter{text-transform:uppercase}
.rh-cats__pill--all{background:var(--ink);color:#fff;border-color:var(--ink)}
.rh-cats__pill--all:hover{background:var(--red);border-color:var(--red);color:#fff}

/* --- Carrusel [richmond_categorias carrusel="1"] ---
   Una sola fila que se desplaza. Sin JS (o si todo entra) se ve igual que el
   strip de siempre: las flechas las agrega destacados.js y solo si hay overflow. */
.rh-cats--car{position:relative}
.rh-cats--car .rh-cats__row{flex-wrap:nowrap; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
  /* Sin barra: el desplazamiento es por flechas (o swipe en móvil). */
  scrollbar-width:none; -ms-overflow-style:none;
  /* El padding vertical deja respirar el translateY(-1px) del hover, que si no
     se recortaba contra el borde del contenedor con overflow. */
  padding:3px 0}
.rh-cats--car .rh-cats__row::-webkit-scrollbar{display:none}
.rh-cats--car .rh-cats__pill{flex:0 0 auto; scroll-snap-align:start}

/* Las flechas flotan sobre los extremos; el degradado avisa que hay más. */
.rh-cats__viewport{position:relative}
.rh-cats__nav{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0;
  box-shadow:0 6px 18px -8px rgba(43,43,46,.45); transition:opacity .16s, border-color .16s, color .16s}
.rh-cats__nav:hover{border-color:var(--red); color:var(--red)}
.rh-cats__nav svg{width:16px; height:16px}
.rh-cats__nav--prev{left:-6px}
.rh-cats__nav--next{right:-6px}
/* En el extremo la flecha se apaga pero NO desaparece: si se ocultara, el resto
   del strip saltaría de lugar en cada desplazamiento. */
.rh-cats__nav[disabled]{opacity:0; pointer-events:none}
.rh-cats__viewport::before,
.rh-cats__viewport::after{content:''; position:absolute; top:0; bottom:0; width:56px; pointer-events:none; z-index:1; opacity:0; transition:opacity .16s}
.rh-cats__viewport::before{left:0; background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.rh-cats__viewport::after{right:0; background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.rh-cats__viewport--ini::before{opacity:1}
.rh-cats__viewport--fin::after{opacity:1}
@media (prefers-reduced-motion:reduce){.rh-cats--car .rh-cats__row{scroll-behavior:auto}}

/* ===== Bloque grande de categorías [richmond_categorias_grid] =====
   La versión "con peso" de la sección: titular de catálogo, mosaico con foto y
   conteo por categoría, y un botón sólido al final. */
.rh-catsg{--red:#FE3B1F;--orange:#F18A00;--ink:#3A3B3E;--body:#5F6064;--muted:#9A9A9E;--line:#ECEBE8;--soft:#F7F6F4;
  --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-catsg *{box-sizing:border-box}
.rh-catsg__head{margin-bottom:26px}
/* clamp: el titular es el ancla de la sección y tiene que seguir siendo grande
   en una columna angosta de Elementor sin desbordar en móvil. */
.rh-catsg__title{font-family:var(--head);font-weight:800;letter-spacing:-.025em;color:var(--ink);
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;margin:0;max-width:20ch}
.rh-catsg__sub{margin:12px 0 0;font-size:1rem;line-height:1.55;color:var(--body);max-width:58ch}

/* Igual que las secciones de producto: la grilla se adapta al ANCHO REAL del
   contenedor, no a un número fijo de columnas. */
.rh-catsg__grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(max(150px,calc((100% - (var(--rh-cols,5) - 1) * 14px) / var(--rh-cols,5))),1fr))}

.rh-catsg__card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  padding:16px 12px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;
  text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s}
.rh-catsg__card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(43,43,46,.28);border-color:#f6b3a6}
.rh-catsg__img{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;
  background:var(--soft);border-radius:12px;overflow:hidden;margin-bottom:10px}
.rh-catsg__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;
  mix-blend-mode:multiply /* las fotos de proveedor vienen con fondo blanco propio */}
.rh-catsg__ph{font-family:var(--head);font-weight:800;font-size:1.6rem;color:var(--muted)}
.rh-catsg__name{font-family:var(--head);font-weight:700;font-size:.9rem;line-height:1.25;color:var(--ink)}
.rh-catsg__card:hover .rh-catsg__name{color:var(--red)}
.rh-catsg__n{font-size:.72rem;color:var(--muted)}

.rh-catsg__foot{display:flex;justify-content:center;margin-top:28px}
.rh-catsg__cta{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 32px;border-radius:26px;
  background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-family:var(--head);font-weight:700;
  font-size:.98rem;text-decoration:none;box-shadow:0 16px 34px -16px rgba(254,59,31,.75);transition:transform .18s,box-shadow .18s}
.rh-catsg__cta:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(254,59,31,.85);color:#fff}
@media (prefers-reduced-motion:reduce){.rh-catsg__card,.rh-catsg__cta{transition:none}}

/* ===== estilos alternativos: se activan con [richmond_destacados estilo="b|e"] ===== */
.rh-dest--b, .rh-dest--e{display:block}
.rh-dest__loading{display:block;min-height:250px;border-radius:16px;background:var(--soft)}

/* --- B: destacado (foto chica izq) + 2 mini --- */
.rh-destb__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rh-destb__head h3{font-family:var(--head);font-weight:800;letter-spacing:-.01em;color:var(--ink);font-size:1.12rem;margin:0}
.rh-destb__all{font-family:var(--head);font-size:.8rem;font-weight:700;color:var(--red);text-decoration:none}
.rh-destb__big{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;transition:.18s}
.rh-destb__big:hover{border-color:#f6b3a6;box-shadow:0 18px 34px -20px rgba(43,43,46,.2)}
.rh-destb__bigimg{width:104px;height:104px;flex:0 0 auto;border-radius:12px;background:var(--soft);overflow:hidden;position:relative;display:grid;place-items:center}
.rh-dest .rh-destb__bigimg img{width:100%;height:100%;object-fit:contain;padding:6px}
.rh-destb__tag{position:absolute;top:6px;left:6px;font-family:var(--head);font-size:.54rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--orange);color:#fff}
.rh-destb__tag--of{background:var(--red)}
.rh-destb__bigb{flex:1;min-width:0}
.rh-destb__nm{display:block;font-family:var(--head);font-weight:800;color:var(--ink);font-size:1rem;line-height:1.18}
.rh-destb__cd{display:block;font-family:ui-monospace,Menlo,monospace;font-size:.66rem;color:var(--muted);margin:3px 0 8px}
.rh-destb__price{font-family:var(--head);font-weight:800;color:var(--ink)}
.rh-destb__price small{font-weight:500;color:var(--muted);font-size:.7em}
.rh-destb__minis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rh-destb__mini{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px;text-decoration:none;transition:.18s}
.rh-destb__mini:hover{border-color:#f6b3a6;transform:translateY(-2px)}
.rh-destb__mth{width:48px;height:48px;border-radius:9px;flex:0 0 auto;background:var(--soft);overflow:hidden;display:grid;place-items:center}
.rh-dest .rh-destb__mth img{width:100%;height:100%;object-fit:contain}
.rh-destb__mn{display:block;font-family:var(--head);font-weight:700;color:var(--ink);font-size:.78rem;line-height:1.15}
.rh-destb__mp{display:block;font-family:var(--head);font-size:.72rem;color:var(--gray);margin-top:2px}
.rh-destb__mp small{color:var(--muted)}

/* --- E: boutique (circular, centrado). Sin fondo: se apoya en tu contenedor. --- */
.rh-dest--e{position:relative;padding:0;background:none;border:0;box-shadow:none}
.rh-deste__head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.rh-deste__ey{font-family:var(--head);font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.rh-deste__all{font-family:var(--head);font-size:.8rem;font-weight:700;color:var(--rust);text-decoration:none}
.rh-deste__stage{position:relative;z-index:2;display:flex;justify-content:center;margin:10px 0 20px}
.rh-deste__plate{position:relative;width:250px;height:250px;border-radius:50%;background:#fff;
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 26px 50px -20px rgba(172,68,30,.55),inset 0 0 0 1px rgba(172,68,30,.12);transition:transform .2s}
.rh-deste__plate:hover{transform:translateY(-3px)}
/* 68 % y no 92 %: la caja de la foto tiene que caber en el CUADRADO INSCRITO en
   el círculo, que mide 70,7 % del diámetro. Con 92 % una mochila alta salía por
   arriba y por abajo del plato y se metía encima del nombre del producto. */
.rh-dest .rh-deste__plate img{width:68%;height:68%;object-fit:contain}
.rh-deste__badge{position:absolute;z-index:3;top:2px;right:12px;font-family:var(--head);font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:linear-gradient(135deg,var(--orange),var(--rust));color:#fff;box-shadow:0 8px 16px -8px rgba(172,68,30,.7)}
.rh-deste__badge--of{background:linear-gradient(135deg,var(--red),var(--rust))}
.rh-deste__nm{position:relative;z-index:2;text-align:center;font-family:var(--head);font-weight:800;color:var(--ink);font-size:1.05rem;line-height:1.15}
.rh-deste__pr{position:relative;z-index:2;text-align:center;font-family:var(--head);font-weight:800;color:var(--rust);font-size:1rem;margin-top:4px}
.rh-deste__pr small{color:var(--muted);font-weight:500;font-size:.68em}
.rh-deste__thumbs{position:relative;z-index:2;display:flex;justify-content:center;gap:9px;margin:14px 0 16px}
.rh-deste__th{color:var(--gray)}
.rh-deste__th:hover{background:var(--paper); border-color:var(--rust)}
.rh-deste__th{width:58px;height:58px;padding:0;border-radius:13px;background:var(--paper);border:1px solid #f0ddce;overflow:hidden;cursor:pointer;box-shadow:0 8px 16px -9px rgba(172,68,30,.5)}
.rh-dest .rh-deste__th img{width:100%;height:100%;object-fit:contain}
.rh-deste__th.on{border-color:var(--rust);box-shadow:0 0 0 2px rgba(172,68,30,.25)}
.rh-deste__cta{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,var(--orange) 0%,var(--rust) 100%);color:#fff;font-family:var(--head);font-weight:700;font-size:.9rem;text-decoration:none;
  box-shadow:0 14px 28px -12px rgba(172,68,30,.75);transition:.18s}
.rh-deste__cta:hover{filter:brightness(1.06)}