/* ==========================================================================
   RematoHastaMiSuegra.cl — componentes
   Cada bloque de acá es un componente que el front implementa tal cual.
   El nombre de la clase es el nombre del componente en el documento `diseno`.
   ========================================================================== */

/* =========================================================== 1. marca / logo
   Reproducción del logo en tipografía viva (el PNG sólo sirve para el favicon
   y para prensa). Tres bloques recortados, contorno hueso y sombra dura. */
.rm-logo {
  display: inline-grid;
  gap: var(--rm-e0);
  justify-items: start;
  text-decoration: none;
  line-height: 1;
}
.rm-logo__l {
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: "wdth" 72, "wght" 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  padding: 2px var(--rm-e2) 3px;
  border: 2px solid var(--rm-hueso);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--rm-tinta);
  transform: rotate(-1.2deg);
}
.rm-logo__l--remato { background: var(--rm-amarillo); color: var(--rm-tinta); font-size: 1.9rem; }
.rm-logo__l--hasta  { background: var(--rm-amarillo); color: var(--rm-tinta); font-size: 0.8rem; letter-spacing: 0.02em; transform: rotate(0.8deg); }
.rm-logo__l--suegra { background: var(--rm-rojo);     color: var(--rm-hueso); font-size: 1.9rem; transform: rotate(0.6deg); }
.rm-logo__l--cl     { background: var(--rm-tinta);    color: var(--rm-hueso); font-size: 0.8rem; transform: rotate(-0.8deg); }
.rm-logo__fila { display: flex; align-items: flex-end; gap: var(--rm-e2); }
.rm-logo:hover .rm-logo__l { transform: rotate(0deg); transition: transform var(--rm-dur-1) var(--rm-ease); }

/* ============================================================== 2. cabecera */
.rm-cabecera {
  background: var(--rm-amarillo);
  color: var(--rm-sobre-amarillo);
  border-bottom: var(--rm-borde-grueso);
  position: sticky; top: 0; z-index: 40;
}
.rm-cabecera__int {
  display: flex; align-items: center; gap: var(--rm-e4);
  min-height: 76px; padding-block: var(--rm-e3);
}
.rm-cabecera__nav { display: flex; gap: var(--rm-e4); margin-left: auto; align-items: center; }
.rm-cabecera__nav a {
  font-variation-settings: "wdth" 100, "wght" 700;
  text-decoration: none; padding: var(--rm-e2) var(--rm-e1);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.rm-cabecera__nav a:hover,
.rm-cabecera__nav a[aria-current="page"] { border-bottom-color: var(--rm-sobre-amarillo); }
@media (max-width: 640px) {
  .rm-cabecera__int { min-height: 64px; gap: var(--rm-e3); }
  .rm-cabecera__nav { gap: var(--rm-e3); font-size: var(--rm-t-cuerpo-s); }
  .rm-cabecera__nav .rm-solo-escritorio { display: none; }
  .rm-logo__l--remato, .rm-logo__l--suegra { font-size: 1.375rem; }
  .rm-logo__l--hasta, .rm-logo__l--cl { font-size: 0.6875rem; }
}

/* ================================================================ 3. botones
   Principal = campo rojo (comprar). Tinta = ofertar. Contorno = terciario.
   Todos con la sombra dura del mundo; al presionar, el botón «se pega». */
.rm-btn {
  --_b: var(--rm-texto);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--rm-e2);
  min-height: var(--rm-toque);
  padding: var(--rm-e3) var(--rm-e5);
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: "wdth" 84, "wght" 800;
  font-size: var(--rm-t-cartel-s);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--_b);
  border-radius: var(--rm-r-chip);
  box-shadow: var(--rm-sombra);
  transition: transform var(--rm-dur-0) var(--rm-ease),
              box-shadow var(--rm-dur-0) var(--rm-ease),
              background-color var(--rm-dur-0) linear;
}
.rm-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--rm-texto); }

.rm-btn--principal { background: var(--rm-accion); color: var(--rm-sobre-accion); }
.rm-btn--principal:hover { background: var(--rm-accion-hover); }
.rm-btn--tinta { background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta); }
.rm-btn--tinta:hover { background: var(--rm-tinta-hover); }
.rm-btn--amarillo { background: var(--rm-amarillo); color: var(--rm-sobre-amarillo); }
.rm-btn--amarillo:hover { background: var(--rm-amarillo-hover); }
.rm-btn--contorno { background: var(--rm-tarjeta); color: var(--rm-texto); }
.rm-btn--contorno:hover { background: var(--rm-kraft); }
.rm-aviso--atencion .rm-btn--fantasma,
.rm-opcion:has(input:checked) .rm-btn--fantasma { color: var(--rm-sobre-amarillo); }
.rm-btn--fantasma {
  background: transparent; color: var(--rm-texto);
  border-color: transparent; box-shadow: none;
  text-decoration: underline;
}
.rm-btn--fantasma:hover { background: var(--rm-neutro); text-decoration: none; }
.rm-btn--fantasma:active { transform: none; }

.rm-btn--g { min-height: 56px; padding-inline: var(--rm-e6); font-size: 1.3rem; }
.rm-btn--s { min-height: var(--rm-toque); padding: var(--rm-e2) var(--rm-e4); font-size: var(--rm-t-cuerpo-s); }
.rm-btn--ancho { width: 100%; }

.rm-btn[disabled], .rm-btn[aria-disabled="true"] {
  background: var(--rm-neutro); color: var(--rm-texto-2);
  border-color: var(--rm-texto-3); box-shadow: none;
  cursor: not-allowed; transform: none;
}
/* Cargando: el rótulo no desaparece, se le agrega el estado. */
.rm-btn[data-cargando="true"] { pointer-events: none; opacity: 0.85; }
.rm-btn[data-cargando="true"]::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 3px solid currentColor; border-top-color: transparent;
  animation: rm-gira 700ms linear infinite;
}
@keyframes rm-gira { to { transform: rotate(360deg); } }

/* ================================================================= 4. chips
   Estado SIEMPRE con palabra. El color no informa solo. */
.rm-chip {
  display: inline-flex; align-items: center; gap: var(--rm-e1);
  padding: 3px var(--rm-e3) 4px;
  border: 2px solid var(--rm-texto);
  border-radius: var(--rm-r-chip);
  background: var(--rm-tarjeta);
  color: var(--rm-texto);
  font-size: var(--rm-t-micro);
  text-transform: uppercase;
  letter-spacing: var(--rm-track-micro);
  font-variation-settings: "wdth" 100, "wght" 700;
  line-height: 1.4;
  white-space: nowrap;
}
.rm-chip--bajando  { background: var(--rm-amarillo); color: var(--rm-sobre-amarillo); }
.rm-chip--piso     { background: var(--rm-vino);   color: var(--rm-sobre-accion); }
.rm-chip--reservado{ background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta); }
.rm-chip--pausado  { background: var(--rm-neutro); }
.rm-chip--vendido  { background: var(--rm-neutro); color: var(--rm-texto-2); }
.rm-chip--ganada   { background: var(--rm-ok);     color: var(--rm-texto-inv); }
.rm-chip--suspendida { background: var(--rm-peligro); color: var(--rm-texto-inv); }
.rm-chip--porpagar { background: var(--rm-amarillo); color: var(--rm-sobre-amarillo); }
.rm-chip--superada { background: var(--rm-neutro); color: var(--rm-texto-2); }
.rm-chip--unidad   { background: var(--rm-kraft); }  /* estado físico de la unidad */

/* ============================================================== 5. tarjetas
   Una sola elevación: borde de 2px + sombra dura. Nunca tarjeta dentro de
   tarjeta; lo interno usa .rm-panel, que no lleva borde propio. */
.rm-tarjeta {
  background: var(--rm-tarjeta);
  border: var(--rm-borde);
  border-radius: var(--rm-r);
  box-shadow: var(--rm-sombra);
}
.rm-panel {
  background: var(--rm-tarjeta-2);
  border-radius: var(--rm-r-panel);
  padding: var(--rm-e4);
}
.rm-panel--kraft { background: var(--rm-kraft); }
.rm-panel--neutro { background: var(--rm-neutro); }

/* =================================================== 6. tarjeta de publicación */
.rm-pub {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform var(--rm-dur-1) var(--rm-ease), box-shadow var(--rm-dur-1) var(--rm-ease);
}
.rm-pub:hover { transform: translate(-2px, -2px); box-shadow: var(--rm-sombra-alta); }
.rm-pub__foto { position: relative; aspect-ratio: 4 / 3; background: var(--rm-kraft); border-bottom: var(--rm-borde); }
.rm-pub__foto svg { width: 100%; height: 100%; }
.rm-pub__marca { position: absolute; top: var(--rm-e3); left: var(--rm-e3); display: flex; gap: var(--rm-e2); flex-wrap: wrap; }
.rm-pub__demo {
  position: absolute; right: 0; bottom: 0;
  background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta);
  font-size: 0.625rem; letter-spacing: var(--rm-track-micro); text-transform: uppercase;
  padding: 2px var(--rm-e2);
}
.rm-pub__cuerpo { padding: var(--rm-e4); display: flex; flex-direction: column; gap: var(--rm-e3); }
/* Toda la tarjeta es el enlace, no sólo el título: el área de toque es la
   tarjeta entera y el texto del enlace sigue siendo el título. */
.rm-pub__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rm-pub__titulo {
  font-family: var(--rm-fuente-texto);
  font-variation-settings: "wdth" 100, "wght" 600;
  font-size: var(--rm-t-cuerpo);
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rm-pub__pie { margin-top: auto; display: flex; flex-direction: column; gap: var(--rm-e2); }

.rm-grilla {
  display: grid;
  gap: var(--rm-e5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
@media (max-width: 640px) { .rm-grilla { gap: var(--rm-e4); grid-template-columns: 1fr; } }

/* ============================================================ 7. el precio
   El corazón del sitio. Lista tachada arriba, campo amarillo con la cifra
   del minuto abajo. La cifra es tabular para que no baile al cambiar. */
.rm-precio { display: flex; flex-direction: column; gap: var(--rm-e2); align-items: flex-start; }

.rm-precio__lista {
  color: var(--rm-texto-2);
  font-size: var(--rm-t-cuerpo-s);
  font-variant-numeric: tabular-nums;
}
/* El tachado es un trazo de plumón, no un text-decoration: viene del mundo.
   Tacha SÓLO la cifra; la palabra «Lista» tiene que quedar legible. */
.rm-precio__lista s {
  position: relative;
  text-decoration: none;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.rm-precio__lista s::after {
  content: ""; position: absolute; left: -5%; right: -5%; top: 50%;
  height: 3px; background: var(--rm-vino); border-radius: 2px;
  transform: rotate(-3.5deg);
}

.rm-precio__ahora {
  display: inline-flex; align-items: baseline; gap: var(--rm-e2);
  background: var(--rm-amarillo);
  color: var(--rm-tinta);
  border: 2px solid var(--rm-tinta);
  border-radius: 8px;
  box-shadow: var(--rm-sombra);
  padding: var(--rm-e1) var(--rm-e3) var(--rm-e2);
  transform: rotate(-0.8deg);
}
.rm-precio__cifra {
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: "wdth" 76, "wght" 900;
  font-size: var(--rm-t-cartel-m);
  line-height: var(--rm-lh-cartel);
  letter-spacing: var(--rm-track-cartel);
  font-variant-numeric: tabular-nums;
}
.rm-precio--ficha .rm-precio__cifra { font-size: var(--rm-t-cartel-xl); }
.rm-precio__baja { font-size: var(--rm-t-cuerpo-s); color: var(--rm-texto-2); }
.rm-precio__baja b { font-variation-settings: "wdth" 100, "wght" 700; color: var(--rm-texto); }

/* El único gesto propio del sitio: cuando cambia un dígito, el cartel se
   vuelve a colgar. 420 ms, una vez, y se apaga con «reducir movimiento». */
.rm-precio__ahora[data-tic="true"] { animation: rm-sello var(--rm-dur-2) var(--rm-ease); }
@keyframes rm-sello {
  0%   { transform: rotate(-0.8deg) scale(1); }
  28%  { transform: rotate(0.9deg)  scale(1.045); }
  100% { transform: rotate(-0.8deg) scale(1); }
}

/* El rótulo micro hereda la tinta del campo en vez de traer la suya.
   `.rm-micro` trae `--rm-texto-2`, que es correcto sobre el papel y es un
   desastre encima de un campo de color: en el campo del precio daba 2,23:1
   (tinta sobre vino) y en la barra de reserva 1,55:1 (secundario sobre hueso).
   Regla: dentro de un campo que declara su propio `color`, el micro hereda. */
.rm-precio__ahora .rm-micro,
.rm-reserva .rm-micro { color: inherit; }

/* Cuando tocó piso, el campo cambia de cara. */
.rm-precio--piso .rm-precio__ahora { background: var(--rm-vino); color: var(--rm-sobre-accion); }

/* ================================================== 8. ofertas (sin casino)
   El icono es una libreta: la oferta es un compromiso anotado, no una jugada. */
.rm-ofertas {
  display: flex; align-items: center; gap: var(--rm-e2);
  font-size: var(--rm-t-cuerpo-s);
  color: var(--rm-texto-2);
}
.rm-ofertas b { color: var(--rm-texto); font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 100, "wght" 700; }
.rm-ofertas__icono { width: 18px; height: 18px; flex: none; color: var(--rm-texto-2); }
.rm-ofertas--vacio { color: var(--rm-texto-3); }

/* ================================================================ 9. avisos
   Campo completo, borde de 2px, icono + palabra. Nunca una barra de color
   al costado. El color jamás es la única señal. */
.rm-aviso {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--rm-e3);
  padding: var(--rm-e4);
  border: var(--rm-borde);
  border-radius: var(--rm-r-panel);
  background: var(--rm-tarjeta);
}
.rm-aviso__icono { width: 24px; height: 24px; }
.rm-aviso__t { font-variation-settings: "wdth" 100, "wght" 700; }
.rm-aviso--info    { background: var(--rm-tarjeta); }
.rm-aviso--atencion{ background: var(--rm-amarillo); color: var(--rm-sobre-amarillo); }
.rm-aviso--peligro { background: var(--rm-peligro); color: var(--rm-texto-inv); }
.rm-aviso--ok      { background: var(--rm-ok);      color: var(--rm-texto-inv); }
/* Los enlaces sueltos heredan el color del campo; los botones NO, porque
   traen el suyo y quedarían invisibles sobre su propio fondo. */
.rm-aviso--peligro a:not(.rm-btn), .rm-aviso--ok a:not(.rm-btn) { color: inherit; }

/* ========================================================== 10. formularios */
.rm-campo { display: flex; flex-direction: column; gap: var(--rm-e2); }
.rm-campo__et { font-variation-settings: "wdth" 100, "wght" 700; font-size: var(--rm-t-cuerpo-s); }
.rm-campo__ayuda { font-size: var(--rm-t-cuerpo-s); color: var(--rm-texto-2); }
.rm-campo__error {
  display: flex; align-items: center; gap: var(--rm-e2);
  font-size: var(--rm-t-cuerpo-s); color: var(--rm-peligro);
  font-variation-settings: "wdth" 100, "wght" 600;
}
.rm-input, .rm-select {
  font: inherit;
  min-height: var(--rm-toque);
  padding: var(--rm-e3);
  background: var(--rm-tarjeta-2);
  color: var(--rm-texto);
  border: var(--rm-borde);
  border-radius: var(--rm-r-panel);
  width: 100%;
}
.rm-input::placeholder { color: var(--rm-texto-3); }  /* 5,68:1 */
.rm-input[aria-invalid="true"] { border-color: var(--rm-peligro); border-width: 3px; }
.rm-input[disabled] { background: var(--rm-neutro); color: var(--rm-texto-2); }

/* monto: la cifra grande con los pasos de $100 a los lados */
.rm-monto { display: flex; align-items: stretch; gap: var(--rm-e2); }
.rm-monto__paso {
  flex: none; width: 56px;
  font-family: var(--rm-fuente-cartel); font-size: 1.6rem;
  background: var(--rm-tarjeta); border: var(--rm-borde);
  border-radius: var(--rm-r-panel); cursor: pointer;
}
.rm-monto__paso:hover { background: var(--rm-kraft); }
.rm-monto__campo {
  flex: 1; display: flex; align-items: center; gap: var(--rm-e2);
  border: var(--rm-borde); border-radius: var(--rm-r-panel);
  background: var(--rm-tarjeta-2); padding-inline: var(--rm-e4);
}
.rm-monto__peso { font-family: var(--rm-fuente-cartel); font-size: 1.6rem; color: var(--rm-texto-2); }
.rm-monto__input {
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: "wdth" 80, "wght" 900;
  font-size: 2.25rem; font-variant-numeric: tabular-nums;
  border: 0; background: transparent; width: 100%; min-height: 64px; color: inherit;
}
.rm-monto__input:focus { outline: none; }
.rm-monto__campo:focus-within { outline: var(--rm-foco-ancho) solid var(--rm-foco); outline-offset: var(--rm-foco-offset); }
.rm-monto__campo:has(input[aria-invalid="true"]) { border-color: var(--rm-peligro); border-width: 3px; }

/* sugerencias de monto */
.rm-sug { display: flex; gap: var(--rm-e2); flex-wrap: wrap; }
.rm-sug button {
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  min-height: var(--rm-toque); padding: var(--rm-e2) var(--rm-e4);
  background: var(--rm-tarjeta); border: var(--rm-borde); border-radius: var(--rm-r-chip);
}
.rm-sug button:hover { background: var(--rm-kraft); }
.rm-sug button[aria-pressed="true"] { background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta); }

/* opción grande: despacho / retiro */
.rm-opcion {
  display: grid; grid-template-columns: 28px 1fr auto; gap: var(--rm-e3);
  align-items: start; padding: var(--rm-e4);
  border: var(--rm-borde); border-radius: var(--rm-r);
  background: var(--rm-tarjeta); cursor: pointer;
}
.rm-opcion:hover { background: var(--rm-kraft); }
.rm-opcion input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--rm-tinta); }
.rm-opcion:has(input:checked) {
  background: var(--rm-amarillo); box-shadow: var(--rm-sombra);
  /* El amarillo es luz en las dos caras, así que lo de encima lleva la tinta
     del amarillo y no la del tema: si hereda, de noche queda hueso sobre
     amarillo (1,34:1). Vale para el texto chico de adentro también. */
  color: var(--rm-sobre-amarillo);
}
.rm-opcion:has(input:checked) .rm-t2,
.rm-opcion:has(input:checked) .rm-s { color: var(--rm-sobre-amarillo); }
.rm-opcion:has(input:focus-visible) { outline: var(--rm-foco-ancho) solid var(--rm-foco); outline-offset: var(--rm-foco-offset); }
.rm-opcion__t { font-variation-settings: "wdth" 100, "wght" 700; }
.rm-opcion__precio { font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 100, "wght" 700; }

/* =========================================================== 11. la reserva
   Cuenta regresiva de 10 minutos. Los dos últimos minutos cambian el campo.
   Además del color, cambia la palabra. */
.rm-reserva {
  display: flex; align-items: center; justify-content: space-between; gap: var(--rm-e4);
  padding: var(--rm-e3) var(--rm-e4);
  background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta);
  border-radius: var(--rm-r); border: var(--rm-borde);
  flex-wrap: wrap;
}
.rm-reserva__reloj {
  font-family: var(--rm-fuente-cartel);
  font-variation-settings: "wdth" 80, "wght" 900;
  font-size: 2.25rem; font-variant-numeric: tabular-nums; line-height: 1;
}
.rm-reserva[data-urgente="true"] { background: var(--rm-accion); }
.rm-reserva__t { font-size: var(--rm-t-cuerpo-s); }

/* ============================================================== 12. pasos */
.rm-pasos { display: flex; gap: var(--rm-e2); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.rm-pasos li {
  display: flex; align-items: center; gap: var(--rm-e2);
  font-size: var(--rm-t-cuerpo-s); color: var(--rm-texto-2);
}
.rm-pasos li + li::before { content: "›"; color: var(--rm-texto-3); margin-right: var(--rm-e1); }
.rm-pasos li[aria-current="step"] { color: var(--rm-texto); font-variation-settings: "wdth" 100, "wght" 700; }
.rm-pasos__n {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--rm-t-micro);
  border: 2px solid currentColor;
}
.rm-pasos li[data-hecho="true"] .rm-pasos__n { background: var(--rm-ok); color: var(--rm-texto-inv); border-color: var(--rm-ok); }

/* ============================================================ 13. pestañas */
.rm-tabs { display: flex; gap: var(--rm-e2); border-bottom: var(--rm-borde); flex-wrap: wrap; }
.rm-tabs button {
  font: inherit; font-variation-settings: "wdth" 100, "wght" 700; cursor: pointer;
  min-height: var(--rm-toque); padding: var(--rm-e2) var(--rm-e4);
  background: transparent; border: 0; border-bottom: 4px solid transparent;
  margin-bottom: -2px; color: var(--rm-texto-2);
}
.rm-tabs button:hover { color: var(--rm-texto); }
.rm-tabs button[aria-selected="true"] { color: var(--rm-texto); border-bottom-color: var(--rm-rojo); }

/* ============================================================== 14. filas
   Mis ofertas / mis compras / mis alertas. En teléfono se apilan. */
.rm-filas { display: flex; flex-direction: column; gap: var(--rm-e3); list-style: none; padding: 0; margin: 0; }
.rm-filas__it {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  gap: var(--rm-e4); align-items: center;
  padding: var(--rm-e3);
}
.rm-filas__mini { width: 72px; height: 72px; border-radius: var(--rm-r-panel); background: var(--rm-kraft); overflow: hidden; }
.rm-filas__t { font-variation-settings: "wdth" 100, "wght" 600; }
.rm-filas__cifra { font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 100, "wght" 700; text-align: right; }
@media (max-width: 720px) {
  .rm-filas__it { grid-template-columns: 56px 1fr; grid-template-areas: "m t" "m c" ". a"; row-gap: var(--rm-e2); }
  .rm-filas__mini { width: 56px; height: 56px; grid-area: m; }
  .rm-filas__t { grid-area: t; }
  .rm-filas__cifra { grid-area: c; text-align: left; }
  .rm-filas__acc { grid-area: a; }
}

/* ========================================================= 15. estado vacío
   Título, una frase, y SIEMPRE una salida real. La suegra puede acompañar
   (zona en línea), nunca reemplazar el botón. */
.rm-vacio {
  display: grid; justify-items: center; text-align: center; gap: var(--rm-e4);
  padding: var(--rm-e8) var(--rm-e4);
  border: 3px dashed var(--rm-linea);
  border-radius: var(--rm-r);
  background: var(--rm-tarjeta);
}
.rm-vacio p:not(.rm-burbuja) { color: var(--rm-texto-2); max-width: 46ch; }

/* ======================================================== 16. barra fija
   Sólo en teléfono, en la ficha: el precio y las dos acciones siempre a mano. */
.rm-barra {
  position: sticky; bottom: 0; z-index: 30;
  display: none; gap: var(--rm-e3); align-items: center;
  padding: var(--rm-e3) var(--rm-e4) calc(var(--rm-e3) + env(safe-area-inset-bottom));
  background: var(--rm-tarjeta); box-shadow: var(--rm-sombra-barra);
}
.rm-barra__precio { font-family: var(--rm-fuente-cartel); font-variation-settings: "wdth" 78, "wght" 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rm-barra { display: flex; } }

/* ============================================================ 17. galería */
.rm-galeria { display: grid; gap: var(--rm-e3); }
.rm-galeria__grande { aspect-ratio: 4 / 3; background: var(--rm-kraft); border: var(--rm-borde); border-radius: var(--rm-r); overflow: hidden; position: relative; }
.rm-galeria__tiras { display: flex; gap: var(--rm-e2); overflow-x: auto; padding-bottom: var(--rm-e1); }
.rm-galeria__tira {
  flex: none; width: 76px; height: 76px; padding: 0; cursor: pointer;
  background: var(--rm-kraft); border: var(--rm-borde); border-radius: var(--rm-r-panel); overflow: hidden;
}
.rm-galeria__tira[aria-current="true"] { box-shadow: var(--rm-sombra); }

/* ============================================================ 18. gráfico */
.rm-grafico { border: var(--rm-borde); border-radius: var(--rm-r); background: var(--rm-tarjeta); padding: var(--rm-e4); }
.rm-grafico svg { width: 100%; height: auto; overflow: visible; }
.rm-grafico__tabla { margin-top: var(--rm-e4); font-size: var(--rm-t-cuerpo-s); }
.rm-grafico__tabla table { border-collapse: collapse; width: 100%; }
.rm-grafico__tabla th, .rm-grafico__tabla td { text-align: left; padding: var(--rm-e2); border-bottom: var(--rm-borde-fino); font-variant-numeric: tabular-nums; }
.rm-grafico__tabla th { font-variation-settings: "wdth" 100, "wght" 700; }
.rm-grafico__pista {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--rm-campo-tinta); color: var(--rm-sobre-tinta);
  padding: var(--rm-e2) var(--rm-e3); border-radius: var(--rm-r-panel);
  font-size: var(--rm-t-cuerpo-s); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================= 19. diálogo */
.rm-dialogo {
  border: var(--rm-borde-grueso); border-radius: var(--rm-r);
  background: var(--rm-tarjeta); color: var(--rm-texto);
  box-shadow: var(--rm-sombra-flota);
  padding: 0; width: min(560px, calc(100vw - 32px));
}
.rm-dialogo::backdrop { background: rgba(15, 13, 13, 0.55); }
.rm-dialogo__cab { display: flex; align-items: start; gap: var(--rm-e3); padding: var(--rm-e5) var(--rm-e5) var(--rm-e3); }
.rm-dialogo__cuerpo { padding: 0 var(--rm-e5) var(--rm-e5); display: flex; flex-direction: column; gap: var(--rm-e4); }
.rm-dialogo__pie { display: flex; gap: var(--rm-e3); flex-wrap: wrap; }
.rm-dialogo__cerrar {
  margin-left: auto; flex: none; width: var(--rm-toque); height: var(--rm-toque);
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 2px solid transparent; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--rm-texto);
}
.rm-dialogo__cerrar:hover { background: var(--rm-neutro); }
@media (max-width: 640px) {
  .rm-dialogo { width: 100vw; max-width: none; margin: auto 0 0; border-radius: var(--rm-r) var(--rm-r) 0 0; border-bottom: 0; }
}

/* ====================================================== 20. zonas de la suegra
   Cuatro contenedores, no doce. El front posiciona la zona; el clip ya viene
   alineado a su ancla. */
.rm-suegra { position: relative; }
.rm-suegra__hueco {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--rm-neutro) 0 10px, var(--rm-kraft) 10px 20px);
  border: 2px dashed var(--rm-texto-3);
  border-radius: var(--rm-r-panel);
  color: var(--rm-texto-2); font-size: var(--rm-t-micro);
  text-transform: uppercase; letter-spacing: var(--rm-track-micro); text-align: center;
}
.rm-suegra--mostrador .rm-suegra__hueco { height: var(--rm-suegra-mostrador); }
.rm-suegra--esquina   .rm-suegra__hueco { height: var(--rm-suegra-esquina); width: var(--rm-suegra-esquina); }
.rm-suegra--ficha     .rm-suegra__hueco { height: var(--rm-suegra-ficha); width: var(--rm-suegra-ficha); }
.rm-suegra--modal     .rm-suegra__hueco { height: var(--rm-suegra-modal); width: calc(var(--rm-suegra-modal) * 0.77); }

.rm-suegra__cerrar {
  position: absolute; top: var(--rm-e1); right: var(--rm-e1);
  width: var(--rm-toque); height: var(--rm-toque);
  display: grid; place-items: center; cursor: pointer;
  background: var(--rm-tarjeta); border: var(--rm-borde); border-radius: 50%;
  font-size: 1.25rem; line-height: 1;
}
/* Burbuja: HTML de verdad, nunca quemada en el video. */
.rm-burbuja {
  position: relative;
  background: var(--rm-hueso); color: var(--rm-tinta);   /* 18,12:1 */
  border: 2px solid var(--rm-tinta); border-radius: var(--rm-r-panel);
  box-shadow: var(--rm-sombra);
  padding: var(--rm-e3) var(--rm-e4);
  max-width: 30ch;
  font-variation-settings: "wdth" 100, "wght" 600;
}
.rm-burbuja::after {
  content: ""; position: absolute; left: var(--rm-e5); bottom: -11px;
  width: 16px; height: 16px; background: var(--rm-hueso);
  border-right: 2px solid var(--rm-tinta); border-bottom: 2px solid var(--rm-tinta);
  transform: rotate(45deg);
}
/* Esquina: fija abajo a la derecha y SIEMPRE sobre la barra de navegación. */
/* La esquina es fija, así que se come lo que queda debajo: en la portada
   tapaba la cuenta de resultados y el selector de orden. La página reserva
   abajo el alto que la esquina ocupa, para que nada quede inalcanzable, y en
   pantalla angosta la esquina no pasa de media pantalla. */
.rm-suegra--esquina { position: fixed; right: var(--rm-e4); bottom: var(--rm-e4); z-index: 35; }
body:has(.rm-suegra--esquina:not([hidden])) { padding-bottom: calc(var(--rm-suegra-esquina) + 120px); }
@media (max-width: 900px) {
  .rm-suegra--esquina { bottom: calc(var(--rm-e4) + 88px); max-width: calc(100vw - var(--rm-e6)); }
}

/* ================================================================= 21. pie */
.rm-pie { border-top: var(--rm-borde-grueso); background: var(--rm-pie-fondo); color: var(--rm-pie-texto); margin-top: var(--rm-e9); }
.rm-pie__int { display: grid; gap: var(--rm-e6); padding-block: var(--rm-e7); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rm-pie a { color: var(--rm-pie-texto); }
.rm-pie h4 { color: var(--rm-amarillo); }

/* interruptor de la suegra: tres valores, no un sí/no */
.rm-interruptor { display: inline-flex; border: 2px solid var(--rm-pie-texto); border-radius: var(--rm-r-chip); overflow: hidden; }
.rm-interruptor label { position: relative; }
.rm-interruptor input { position: absolute; opacity: 0; inset: 0; }
.rm-interruptor span {
  display: grid; place-items: center; min-height: var(--rm-toque);
  padding-inline: var(--rm-e4); cursor: pointer;
  font-size: var(--rm-t-cuerpo-s); font-variation-settings: "wdth" 100, "wght" 700;
}
.rm-interruptor input:checked + span { background: var(--rm-amarillo); color: var(--rm-sobre-amarillo); }
.rm-interruptor input:focus-visible + span { outline: var(--rm-foco-ancho) solid var(--rm-pie-texto); outline-offset: -5px; }

/* ============================================================== 22. cargando
   Esqueleto en el papel del sitio, no gris genérico. */
.rm-esqueleto { background: var(--rm-neutro); border-radius: var(--rm-r-panel); position: relative; overflow: hidden; }
.rm-esqueleto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: rm-barrido 1.3s linear infinite;
}
@keyframes rm-barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* =============================================================== 23. filtros */
.rm-filtros { display: flex; gap: var(--rm-e2); flex-wrap: wrap; align-items: center; }
.rm-filtros__g { display: flex; gap: var(--rm-e2); flex-wrap: wrap; }