/* ==========================================================================
   Catálogo de proyectos y ficha de producto.

   Mismo sistema que la portada —tokens `--rm-*`, tipografía, filetes de 1px y
   espacio— pero sin repetir su ritmo. En concreto, aquí NO hay carrusel: el
   catálogo se ve entero de una pasada, así que las tarjetas van en rejilla.
   El carrusel de la portada existe porque allí los productos comparten
   pantalla con otras seis secciones; aquí son el contenido de la página.

   Se carga sólo en estas dos plantillas, por `{% block extra_css %}`: no
   tiene sentido pedirlo en las páginas que no lo usan.
   ========================================================================== */

/* --- Entradilla común a las dos páginas --------------------------------- */
.rm-page-hero {
  padding-block: var(--rm-space-8) var(--rm-space-7);
  border-bottom: 1px solid var(--rm-rule);
}

.rm-page-hero h1 { margin-bottom: var(--rm-space-5); }

.rm-page-hero__sub {
  max-width: 56ch;
  margin: 0;
  font-size: var(--rm-text-lg);
  color: var(--rm-ink-muted);
}

/* Migas: una sola línea en la tipografía mono, del mismo peso visual que los
   rótulos de sección. Sin el componente de Bootstrap, que traía su propio
   separador y su propio color. */
.rm-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2) var(--rm-space-3);
  margin: 0 0 var(--rm-space-6);
  padding: 0;
  list-style: none;
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  color: var(--rm-ink-subtle);
}

.rm-crumbs li { display: flex; align-items: center; gap: var(--rm-space-3); }
.rm-crumbs li + li::before { content: '/'; color: var(--rm-ink-subtle); }
.rm-crumbs a { color: var(--rm-ink-muted); }
.rm-crumbs [aria-current='page'] { color: var(--rm-ink); }

/* ==========================================================================
   1. Catálogo
   ========================================================================== */
.rm-catalog { padding-block: var(--rm-space-9); }
.rm-catalog + .rm-catalog { border-top: 1px solid var(--rm-rule-strong); }

.rm-catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rm-space-4);
  padding-bottom: var(--rm-space-4);
  margin-bottom: var(--rm-space-6);
  border-bottom: 1px solid var(--rm-rule-strong);
}

.rm-catalog__head h2 { margin: 0 0 var(--rm-space-2); font-size: var(--rm-text-2xl); }
.rm-catalog__head p { margin: 0; }
.rm-catalog__head .rm-mono { max-width: 46ch; }

.rm-catalog__grid {
  display: grid;
  gap: var(--rm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dos columnas en cuanto hay sitio y tres en escritorio: seis productos
   quedan en dos filas exactas y ninguna tarjeta se queda huérfana. */
@media (min-width: 46em) {
  .rm-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72em) {
  .rm-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Los encargos son piezas de texto más largas: se quedan en dos columnas. */
.rm-catalog__grid--wide { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 56em) {
  .rm-catalog__grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rm-catalog__card {
  display: flex;
  flex-direction: column;
  padding: var(--rm-space-5);
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-lg);
  transition: border-color var(--rm-duration) var(--rm-ease);
}

.rm-catalog__card:hover { border-color: var(--rm-rule-strong); }

/* Sector y etapa, uno a cada extremo de la primera línea, igual que en la
   tarjeta de la portada: la etapa se lee siempre en el mismo sitio. */
.rm-catalog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rm-space-2) var(--rm-space-3);
  margin-bottom: var(--rm-space-4);
}

.rm-catalog__meta .rm-eyebrow { margin: 0; }

.rm-catalog__name {
  display: flex;
  align-items: center;
  gap: var(--rm-space-3);
  margin: 0 0 var(--rm-space-3);
  font-size: var(--rm-text-lg);
}

/* La placa es más pequeña que en la tarjeta del carrusel: aquí caben tres
   tarjetas por fila y el nombre tiene que seguir mandando. */
.rm-catalog__card .rm-logo-plate { --rm-logo-height: 1.5rem; }

.rm-catalog__summary {
  margin: 0 0 var(--rm-space-5);
  font-size: var(--rm-text-sm);
  color: var(--rm-ink-muted);
}

/* Las plataformas se pegan abajo, sobre el enlace: con tarjetas de alto
   desigual quedan alineadas de columna a columna en vez de bailando. */
.rm-catalog__facts { margin-top: auto; padding-top: var(--rm-space-2); }
.rm-catalog__facts .rm-product__chips { margin-bottom: var(--rm-space-4); }

.rm-catalog__link {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  font-size: var(--rm-text-sm);
  font-weight: 550;
}

/* --- Encargos ------------------------------------------------------------ */
.rm-catalog__client {
  margin: 0 0 var(--rm-space-4);
  font-size: var(--rm-text-sm);
  font-weight: 550;
}

.rm-catalog__result {
  margin: 0 0 var(--rm-space-5);
  padding: var(--rm-space-4);
  background: var(--rm-surface-sunken);
  border-radius: var(--rm-radius-md);
  font-size: var(--rm-text-sm);
  color: var(--rm-ink-muted);
}

.rm-catalog__result .rm-product__key { margin-bottom: var(--rm-space-2); }

/* Filtro por sector: pastillas enlazadas, no un formulario. Cada una es una
   URL propia, así que se puede compartir y la vuelta atrás funciona. */
.rm-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-2) var(--rm-space-3);
  margin-bottom: var(--rm-space-6);
  padding: 0;
  list-style: none;
}

.rm-filter__key { margin: 0; }

.rm-filter a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--rm-space-1) var(--rm-space-4);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
  font-size: var(--rm-text-sm);
  color: var(--rm-ink-muted);
  text-decoration: none;
}

.rm-filter a:hover { border-color: var(--rm-ink-subtle); color: var(--rm-ink); }

.rm-filter a[aria-current='true'] {
  background: var(--rm-solid);
  border-color: var(--rm-solid);
  color: var(--rm-solid-ink);
}

/* Objetivo táctil completo sólo con puntero grueso. */
@media (pointer: coarse) {
  .rm-filter a { min-height: 44px; }
}

.rm-catalog__empty {
  margin: 0;
  padding: var(--rm-space-7) 0;
  color: var(--rm-ink-muted);
}

/* ==========================================================================
   2. Ficha de producto
   ========================================================================== */
.rm-sheet-hero {
  padding-block: var(--rm-space-8) var(--rm-space-7);
  border-bottom: 1px solid var(--rm-rule);
}

.rm-sheet-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-3);
  margin-bottom: var(--rm-space-5);
}

.rm-sheet-hero__meta .rm-eyebrow { margin: 0; }

/* Un punto por debajo del titular de la portada: aquí el nombre comparte
   línea con la placa del logotipo, y a tamaño completo la placa acababa
   siendo más alta que el resto de la cabecera. */
.rm-sheet-hero__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-4);
  margin-bottom: var(--rm-space-4);
  font-size: var(--rm-text-3xl);
}

.rm-sheet-hero .rm-logo-plate { --rm-logo-height: 2.5rem; }

.rm-sheet-hero__tagline {
  max-width: 52ch;
  margin: 0 0 var(--rm-space-5);
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-xl);
  line-height: var(--rm-leading-snug);
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 32;
}

.rm-sheet-hero__lead {
  max-width: 62ch;
  margin: 0 0 var(--rm-space-6);
  font-size: var(--rm-text-lg);
  color: var(--rm-ink-muted);
}

.rm-sheet-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rm-space-3); }

.rm-sheet { padding-block: var(--rm-space-9); }

.rm-sheet__grid { display: grid; gap: var(--rm-space-8); }

@media (min-width: 62em) {
  .rm-sheet__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: var(--rm-space-9);
    align-items: start;
  }
}

.rm-sheet__block { padding-top: var(--rm-space-7); border-top: 1px solid var(--rm-rule); }
.rm-sheet__block:first-child { padding-top: 0; border-top: 0; }
.rm-sheet__block + .rm-sheet__block { margin-top: var(--rm-space-7); }
.rm-sheet__block h2 { margin: 0 0 var(--rm-space-5); font-size: var(--rm-text-xl); }
.rm-sheet__block p { color: var(--rm-ink-muted); }
.rm-sheet__block p:last-child { margin-bottom: 0; }

/* Aviso legal del producto: filete lateral, sin caja de color ni icono de
   alarma. Es un matiz, no una alerta del sistema. */
.rm-sheet__notice {
  margin: var(--rm-space-5) 0 0;
  padding-left: var(--rm-space-5);
  border-left: 2px solid var(--rm-rule-strong);
  font-size: var(--rm-text-sm);
  color: var(--rm-ink-muted);
}

/* Glosario de contexto: problema y público, uno debajo de otro. */
.rm-sheet__notes { display: grid; gap: var(--rm-space-4); margin: var(--rm-space-6) 0 0; }
.rm-sheet__notes dt { margin-bottom: var(--rm-space-2); }
.rm-sheet__notes dd { max-width: 66ch; margin: 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); }

/* Funcionalidades: lista con marca de verificación, el mismo gesto que las
   capacidades de las tarjetas sin captura de la portada. */
.rm-sheet__features {
  display: grid;
  gap: var(--rm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .rm-sheet__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rm-sheet__features li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--rm-space-3);
  align-items: start;
  font-size: var(--rm-text-sm);
  color: var(--rm-ink-muted);
}

.rm-sheet__tick { margin-top: 0.2em; color: var(--rm-accent); }

/* Hoja de ruta: hitos numerados bajo filete, con su estado en mono. */
.rm-sheet__roadmap { margin: 0; padding: 0; list-style: none; }

.rm-sheet__milestone {
  display: grid;
  gap: var(--rm-space-2);
  padding-block: var(--rm-space-5);
  border-bottom: 1px solid var(--rm-rule);
}

@media (min-width: 48em) {
  .rm-sheet__milestone {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--rm-space-5);
    align-items: baseline;
  }
}

.rm-sheet__milestone h3 {
  margin: 0 0 var(--rm-space-2);
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-base);
  font-weight: 600;
  letter-spacing: 0;
}

.rm-sheet__milestone p { margin: 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); }

/* --- Columna lateral ----------------------------------------------------- */
.rm-aside { display: grid; gap: var(--rm-space-5); }

.rm-aside__box {
  padding: var(--rm-space-5);
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-lg);
}

.rm-aside__box h2 { margin: 0 0 var(--rm-space-4); font-size: var(--rm-text-lg); }
.rm-aside__box p { margin: 0 0 var(--rm-space-4); font-size: var(--rm-text-sm); color: var(--rm-ink-muted); }
.rm-aside__box .rm-product__chips { margin-bottom: 0; }

.rm-aside__group + .rm-aside__group {
  margin-top: var(--rm-space-4);
  padding-top: var(--rm-space-4);
  border-top: 1px solid var(--rm-rule);
}

.rm-aside__value { margin: var(--rm-space-2) 0 0; font-size: var(--rm-text-sm); }

.rm-aside__links { display: grid; gap: var(--rm-space-2); margin: 0; padding: 0; list-style: none; }
.rm-aside__links a { font-size: var(--rm-text-sm); }

.rm-aside__box .btn-tech-primary { width: 100%; }

/* --- Otros productos ----------------------------------------------------- */
.rm-related { padding-block: var(--rm-space-8); border-top: 1px solid var(--rm-rule-strong); }
.rm-related h2 { margin: 0 0 var(--rm-space-6); font-size: var(--rm-text-xl); }