/* ==========================================================================
   Portada. Rediseño del 2026-09-28.

   Abre y cierra con una banda oscura —la portada y el cierre— y entre medias
   va en claro. Lo que manda es el producto: pantallas reales dentro de un
   marco de teléfono, sobre un panel teñido con el color de cada aplicación.
   ========================================================================== */

/* --- Aparición al entrar en viewport ------------------------------------
   La opacidad inicial sólo se aplica si `theme.js` (síncrono en <head>) ha
   podido marcar el documento con data-js. Sin JavaScript el atributo no
   existe, el selector no casa y el contenido nace visible: nunca queda una
   portada en blanco. Con movimiento reducido tampoco se oculta nada. */
:root[data-js='true'] .rm-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--rm-ease), transform 560ms var(--rm-ease);
}

:root[data-js='true'] .rm-reveal[data-visible='true'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-js='true'] .rm-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Piezas compartidas -------------------------------------------------- */
.rm-eyebrow {
  margin: 0 0 var(--rm-space-4);
  font-family: var(--rm-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-ink-muted);
}

.rm-figure {
  font-family: var(--rm-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rm-ink);
}

.rm-figure--xl {
  display: block;
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 0.9;
}

.rm-mono {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--rm-ink-muted);
}

.rm-shot { margin: 0; }

.rm-shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-lg);
  background: var(--rm-surface-sunken);
}

.rm-shot figcaption {
  margin-top: var(--rm-space-2);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  color: var(--rm-ink-muted);
}

/* Marco de teléfono. Es sólo borde y radio: la captura ya trae su barra de
   estado, así que no se dibuja isla ni botones. El bisel es el mismo casi
   negro en los dos temas, como el de un teléfono de verdad. */
.rm-device img {
  border: 6px solid #0b0f17;
  border-radius: 30px;
  background: #0b0f17;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), var(--rm-shadow-device);
}

/* Las capturas son enlaces a la página de su producto. Al pasar el ratón el
   teléfono se levanta un poco; el foco de teclado lleva el anillo de siempre.

   En las tarjetas del carrusel el enlace sale del orden de tabulación
   (tabindex=-1): el botón «Ver producto» de la misma tarjeta ya lleva al
   mismo sitio, y dos paradas seguidas con el mismo destino sólo alargan el
   recorrido con teclado. */
.rm-shot__link {
  display: block;
  border-radius: 30px;
  text-decoration: none;
  cursor: pointer;
}

.rm-shot__link img,
.rm-shot__link .rm-product__hero-icon {
  transition: transform 320ms var(--rm-ease), box-shadow 320ms var(--rm-ease);
}

.rm-shot__link:hover img,
.rm-shot__link:focus-visible img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 0 5px color-mix(in srgb, var(--rm-product-accent, var(--rm-brand-bright)) 35%, transparent), var(--rm-shadow-device);
}

.rm-shot__link:hover .rm-product__hero-icon { transform: translateY(-6px) scale(1.04); }

.rm-shot__link:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .rm-shot__link:hover img,
  .rm-shot__link:focus-visible img,
  .rm-shot__link:hover .rm-product__hero-icon { transform: none; }
}

/* Botones sobre banda oscura. El primario lleva el verde de marca con tinta
   oscura (8.4:1); el secundario es un contorno claro. */
.rm-btn-brand.btn-tech-primary {
  background: var(--rm-brand-bright);
  border-color: var(--rm-brand-bright);
  color: #07110a !important;
  font-weight: 600;
}

.rm-btn-brand.btn-tech-primary:hover {
  background: #86d06b;
  border-color: #86d06b;
  color: #07110a !important;
}

.rm-btn-ghost.btn-tech-secondary {
  border-color: rgb(255 255 255 / 0.22);
  color: var(--rm-night-ink) !important;
}

.rm-btn-ghost.btn-tech-secondary:hover {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.4);
  color: var(--rm-night-ink) !important;
}

/* ==========================================================================
   1. Portada: banda oscura con resplandor de marca y retícula
   ========================================================================== */
.rm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--rm-space-9) var(--rm-space-8);
  background: var(--rm-night);
  color: var(--rm-night-ink);
}

/* Retícula de 56px que se desvanece hacia los bordes. Decorativa. */
.rm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%);
}

.rm-hero__glow {
  position: absolute;
  inset: -20% -10% auto 35%;
  z-index: -1;
  height: 120%;
  background:
    radial-gradient(40% 40% at 60% 35%, rgb(108 191 79 / 0.28), transparent 70%),
    radial-gradient(35% 35% at 85% 60%, rgb(56 120 255 / 0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

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

@media (min-width: 62em) {
  .rm-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--rm-space-9);
    align-items: center;
  }
}

.rm-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  margin: 0 0 var(--rm-space-5);
  padding: 6px 14px 6px 10px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--rm-radius-pill);
  background: rgb(255 255 255 / 0.04);
  font-size: var(--rm-text-xs);
  font-weight: 500;
  color: var(--rm-night-muted);
}

.rm-hero__badge-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rm-brand-bright);
  box-shadow: 0 0 0 4px rgb(108 191 79 / 0.2);
}

.rm-hero h1 {
  margin-bottom: var(--rm-space-5);
  color: var(--rm-night-ink);
  font-size: clamp(2.5rem, 5vw + 1rem, 4.75rem);
  max-width: 14ch;
}

.rm-hero__sub {
  max-width: 44ch;
  margin-bottom: var(--rm-space-6);
  font-size: var(--rm-text-lg);
  color: var(--rm-night-muted);
}

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

.rm-hero__actions .btn-tech-primary,
.rm-hero__actions .btn-tech-secondary { min-height: 48px; padding-inline: var(--rm-space-6); }

.rm-hero__note {
  max-width: 48ch;
  margin: var(--rm-space-7) 0 0;
  font-size: var(--rm-text-sm);
  color: var(--rm-night-subtle);
}

/* Tres teléfonos en el orden de los productos. El del centro va delante y
   un poco más grande; los de los lados, más abajo y girados hacia fuera. Se
   lee como una composición y no como tres capturas pegadas. */
.rm-hero__shots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rm-space-3);
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  align-items: start;
}

.rm-hero__shots img {
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top center;
}

.rm-hero__shots .rm-shot:nth-child(1) { margin-top: var(--rm-space-8); rotate: -5deg; }
.rm-hero__shots .rm-shot:nth-child(2) { position: relative; z-index: 1; scale: 1.1; }
.rm-hero__shots .rm-shot:nth-child(3) { margin-top: var(--rm-space-8); rotate: 5deg; }

@media (min-width: 36em) {
  .rm-hero__shots { gap: var(--rm-space-4); }
  .rm-hero__shots .rm-shot:nth-child(1),
  .rm-hero__shots .rm-shot:nth-child(3) { margin-top: var(--rm-space-9); }
}

@media (prefers-reduced-motion: no-preference) {
  .rm-hero__shots .rm-shot { animation: rm-float 7s ease-in-out infinite; }
  .rm-hero__shots .rm-shot:nth-child(2) { animation-delay: -2.3s; }
  .rm-hero__shots .rm-shot:nth-child(3) { animation-delay: -4.6s; }
}

@keyframes rm-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* Fila de aplicaciones al pie de la banda. */
.rm-hero__apps {
  display: grid;
  gap: var(--rm-space-4);
  margin-top: var(--rm-space-9);
  padding-top: var(--rm-space-6);
  border-top: 1px solid var(--rm-night-rule);
}


.rm-hero__apps-label {
  margin: 0;
  font-family: var(--rm-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-night-subtle);
}

.rm-hero__apps-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-3) var(--rm-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-hero__app {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-3);
  color: var(--rm-night-ink);
  font-size: var(--rm-text-sm);
  font-weight: 550;
  text-decoration: none;
}

a.rm-hero__app:hover { color: #fff; }
a.rm-hero__app:hover .rm-app-icon { transform: translateY(-2px); }

.rm-hero__app .rm-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  transition: transform var(--rm-duration) var(--rm-ease);
}

/* ==========================================================================
   2. Nuestros productos: una tarjeta grande por producto, a dos columnas
   ========================================================================== */
.rm-work { padding-block: var(--rm-space-10); }

.rm-work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--rm-space-4);
  margin-bottom: var(--rm-space-7);
}

.rm-work__head h2 { margin: 0 0 var(--rm-space-2); font-size: var(--rm-text-3xl); }
.rm-work__head p { margin: 0; }

/* Enlace «hacia dentro»: mismo gesto en productos, servicios y presentación. */
.rm-work__more {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  font-size: var(--rm-text-sm);
  font-weight: 600;
  text-decoration: none;
}

.rm-work__more .rm-icon { transition: transform var(--rm-duration) var(--rm-ease); }
.rm-work__more:hover .rm-icon { transform: translateX(3px); }

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

/* --- Carrusel -----------------------------------------------------------
   Desplazamiento nativo con scroll-snap. Sin librería y sin autoplay: la
   pista es un contenedor con overflow, así que funciona igual con el guion
   desactivado. main.js sólo añade los controles y los indicadores. */
.rm-carousel {
  position: relative;
  /* Intervalo de la rotación automática. Lo lee main.js (en segundos) y es
     también lo que tarda en llenarse la barra del indicador activo. */
  --rm-rotate-delay: 6s;
}

.rm-carousel__track {
  display: flex;
  gap: var(--rm-space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Aire para el anillo de foco y la sombra de la tarjeta; se compensa con
     el margen negativo. `scroll-padding` iguala al relleno para que la
     primera tarjeta se ancle en scrollLeft = 0. */
  padding: 8px 8px 28px;
  margin: -8px -8px -28px;
  scroll-padding-inline: 8px;
}

.rm-carousel__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rm-carousel__track { scroll-behavior: auto; }
}

/* La tarjeta siguiente siempre asoma: un carrusel que no enseña que hay más
   contenido esconde producto. */
.rm-carousel__slide {
  flex: 0 0 min(88%, 24rem);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-xl);
  box-shadow: var(--rm-shadow-card);
}

@media (min-width: 48em) {
  .rm-carousel__slide { flex-basis: 82%; }
}

@media (min-width: 68em) {
  .rm-carousel__slide {
    flex-basis: 88%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.rm-carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-4);
  margin-top: var(--rm-space-6);
}

.rm-carousel__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule-strong);
  border-radius: var(--rm-radius-pill);
  font-size: var(--rm-text-lg);
  color: var(--rm-ink);
  cursor: pointer;
  transition: background-color var(--rm-duration-fast) var(--rm-ease),
              border-color var(--rm-duration-fast) var(--rm-ease);
}

.rm-carousel__nav:hover:not(:disabled) {
  background: var(--rm-surface-sunken);
  border-color: var(--rm-ink-subtle);
}

.rm-carousel__nav:disabled {
  color: var(--rm-ink-subtle);
  border-color: var(--rm-rule);
  cursor: default;
  opacity: 0.6;
}

/* Una sola flecha en el sprite: la de retroceder es la misma girada. */
.rm-carousel__nav--prev .rm-icon { transform: rotate(180deg); }

/* Los indicadores son los iconos de las aplicaciones: se sabe a qué producto
   se salta antes de pulsar. El activo se enciende; el resto queda atenuado. */
.rm-carousel__dots { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rm-space-1); }

@media (min-width: 36em) {
  .rm-carousel__dots { gap: var(--rm-space-2); }
}

.rm-carousel__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--rm-duration) var(--rm-ease),
              border-color var(--rm-duration) var(--rm-ease),
              transform var(--rm-duration) var(--rm-ease);
}

.rm-carousel__dot img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}

/* Un producto sin icono conserva el punto. */
.rm-carousel__dot:not(:has(img))::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rm-ink-subtle);
}

.rm-carousel__dot:hover { opacity: 0.85; }

.rm-carousel__dot[aria-current='true'] {
  opacity: 1;
  border-color: var(--rm-accent);
  transform: translateY(-2px);
}

/* Barra de progreso de la rotación: se llena bajo el icono activo mientras
   el carrusel rota solo. Al pararse (foco de teclado, pausa) desaparece,
   y al reanudar vuelve a empezar, igual que el temporizador. */
.rm-carousel__dot { position: relative; }

.rm-carousel[data-rotating='true'] .rm-carousel__dot[aria-current='true']::after {
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 1px;
  height: 3px;
  border-radius: 2px;
  background: var(--rm-accent);
  transform-origin: left center;
  animation: rm-rotate-progress var(--rm-rotate-delay) linear forwards;
}

@keyframes rm-rotate-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Botón de pausa y reanudación: el icono cambia con aria-pressed. */
.rm-carousel__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule-strong);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink);
  cursor: pointer;
}

.rm-carousel__toggle[hidden] { display: none; }

.rm-carousel__toggle:hover { background: var(--rm-surface-sunken); border-color: var(--rm-ink-subtle); }

/* Pausa: dos barras. */
.rm-carousel__toggle-icon {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

/* Reproducir: triángulo. */
.rm-carousel__toggle[aria-pressed='true'] .rm-carousel__toggle-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-inline: 0;
  border-block: 7px solid transparent;
  border-left: 11px solid currentColor;
}

/* En un teléfono no caben las flechas y los seis iconos en una fila: se
   quedan los iconos, que además dicen a qué producto se salta. */
@media (max-width: 35.99em) {
  .rm-carousel__controls .rm-carousel__nav { display: none; }

  /* Seis iconos y el botón de pausa en una sola fila a 360px. 40px sigue
     muy por encima del mínimo de 24px de WCAG 2.5.8 para objetivos táctiles. */
  .rm-carousel__controls { flex-wrap: nowrap; gap: var(--rm-space-2); }
  .rm-carousel__dot { width: 40px; height: 40px; }
  .rm-carousel__dot img { width: 28px; height: 28px; }
  .rm-carousel__toggle { flex: none; width: 40px; height: 40px; }
}

/* --- Tarjeta de producto -------------------------------------------------- */
/* `:where()` deja la especificidad a cero: el color por producto, declarado en
   components.css con `.rm-product--<slug>`, tiene que ganar aunque esta hoja
   se cargue después. */
:where(.rm-product) { --rm-product-accent: var(--rm-accent); }

.rm-product__body {
  display: flex;
  flex-direction: column;
  padding: var(--rm-space-6);
}

@media (min-width: 68em) {
  .rm-product__body { padding: var(--rm-space-8); }
}

/* Sector y etapa, uno a cada extremo de la primera línea de la tarjeta. */
.rm-product__head {
  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-5);
}

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

/* `.rm-stage` (la pastilla de etapa) y `.rm-app-icon` están en components.css:
   las comparten esta tarjeta, el catálogo de /productos/ y la ficha. */

.rm-product__name {
  display: flex;
  align-items: center;
  gap: var(--rm-space-4);
  margin-bottom: var(--rm-space-4);
  font-size: var(--rm-text-2xl);
  letter-spacing: -0.03em;
}

.rm-product__name .rm-app-icon { width: 56px; height: 56px; border-radius: 14px; }

/* La marca de color del producto: un dato, no un fondo. Decorativa. */
.rm-product__mark {
  flex: none;
  width: 6px;
  height: 1.4em;
  border-radius: 3px;
  background: var(--rm-product-accent);
}

.rm-product__summary {
  font-size: var(--rm-text-base);
  color: var(--rm-ink-muted);
}

/* Cifras del producto. En móvil, filas compactas con el número a la
   izquierda; con sitio, una fila de cajas con el número encima. */
.rm-product__figures {
  display: grid;
  gap: var(--rm-space-2);
  margin: var(--rm-space-4) 0 var(--rm-space-5);
}

.rm-product__figures > div {
  display: flex;
  align-items: baseline;
  gap: var(--rm-space-3);
  padding: var(--rm-space-3) var(--rm-space-4);
  background: var(--rm-surface-sunken);
  border-radius: var(--rm-radius-md);
}

.rm-product__figures dt { font-size: var(--rm-text-lg); line-height: 1.15; white-space: nowrap; }

.rm-product__figures dd {
  margin: 0;
  font-size: var(--rm-text-xs);
  color: var(--rm-ink-muted);
}

@media (min-width: 30em) {
  .rm-product__figures { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--rm-space-3); }
  .rm-product__figures > div { display: block; padding: var(--rm-space-4); }
  .rm-product__figures dd { margin-top: var(--rm-space-1); }
}

/* `.rm-product__key` y `.rm-product__chips` están en components.css. */
.rm-product__facts { margin-bottom: var(--rm-space-6); }

.rm-product__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--rm-space-2);
  margin-top: auto;
  padding: 10px 18px;
  border-radius: var(--rm-radius-md);
  background: var(--rm-solid);
  color: var(--rm-solid-ink) !important;
  font-size: var(--rm-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--rm-duration-fast) var(--rm-ease);
}

.rm-product__link:hover { background: var(--rm-solid-hover); }

/* Lo que hace el producto: lista con marca de verificación. */
.rm-product__highlights {
  display: grid;
  gap: var(--rm-space-3);
  margin: var(--rm-space-2) 0 var(--rm-space-5);
  padding: 0;
  list-style: none;
}

.rm-product__highlights 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);
}

/* El color es --rm-accent y no el de la marca del producto: ese sí cambia con
   el tema y está comprobado en los dos. */
.rm-product__tick {
  box-sizing: content-box;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.15em;
  padding: 3px;
  border-radius: 50%;
  background: var(--rm-accent-wash);
  color: var(--rm-accent);
}

/* El escaparate: panel teñido con el color de la aplicación, con los
   teléfonos encima. Mezclado con la superficie para que no grite en claro y
   no se apague en oscuro. */
.rm-product__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20rem;
  padding: var(--rm-space-8) var(--rm-space-6);
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--rm-product-accent) 34%, transparent), transparent 70%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--rm-product-accent) 20%, var(--rm-surface)),
      color-mix(in srgb, var(--rm-product-accent) 6%, var(--rm-surface)));
}

.rm-product__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--rm-product-accent) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rm-product-accent) 16%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 75%);
  pointer-events: none;
}

/* Dos capturas, la segunda un poco más abajo: se leen como una composición.
   En móvil sólo la primera. */
.rm-product__shots {
  position: relative;
  display: grid;
  gap: var(--rm-space-5);
  grid-template-columns: minmax(0, 15rem);
  justify-content: center;
  width: 100%;
}

.rm-product__shots .rm-shot:nth-child(n + 2) { display: none; }

@media (min-width: 48em) {
  .rm-product__shots { grid-template-columns: repeat(2, minmax(0, 15rem)); }
  .rm-product__shots .rm-shot:nth-child(n + 2) { display: block; margin-top: var(--rm-space-7); }
}

.rm-product__shots img {
  aspect-ratio: 9 / 17;
  object-fit: cover;
  object-position: top center;
}

.rm-product__shots figcaption { display: none; }

/* Sin capturas: el icono de la aplicación en grande, flotando sobre el panel. */
.rm-product__visual .rm-product__hero-icon {
  position: relative;
  align-self: center;
  width: clamp(7rem, 14vw, 10rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 26%;
  box-shadow: 0 28px 56px -18px color-mix(in srgb, var(--rm-product-accent) 70%, #000),
              inset 0 0 0 1px rgb(0 0 0 / 0.06);
}

/* --- La tarjeta en móvil y tableta (una sola columna) -----------------------
   Medida a 390px, la tarjeta llegaba a 1805px: más de dos pantallas por
   producto, y todas estiradas a la altura de la más larga, así que las cortas
   acababan con un hueco en blanco debajo. Aquí:
   · cada tarjeta tiene su propia altura;
   · la imagen va arriba, más baja, con el teléfono asomando desde abajo;
   · de lo que hace el producto se enseñan tres puntos: el resto está en su
     página, a un toque del botón. */
@media (max-width: 67.99em) {
  .rm-carousel__track { align-items: flex-start; }

  .rm-product__visual {
    order: -1;
    min-height: 0;
    max-height: 17rem;
    padding: var(--rm-space-6) var(--rm-space-5) 0;
    place-items: start center;
  }

  .rm-product__shots { grid-template-columns: minmax(0, 11rem); }

  .rm-product__shots .rm-shot:nth-child(n + 2) { margin-top: var(--rm-space-6); }

  .rm-product__visual:has(.rm-product__hero-icon) {
    place-items: center;
    padding-block: var(--rm-space-7);
  }

  .rm-product__visual .rm-product__hero-icon { width: 6.5rem; }

  .rm-product__highlights li:nth-child(n + 4) { display: none; }

  .rm-product--meetingvoice .rm-product__visual { place-items: center; padding-bottom: var(--rm-space-6); }
}

@media (min-width: 48em) and (max-width: 67.99em) {
  .rm-product__visual { max-height: 20rem; }
  .rm-product__shots { grid-template-columns: repeat(2, minmax(0, 12rem)); }
}

/* MeetingVoice es de escritorio: su captura es apaisada y va a ancho entero,
   con marco de ventana en vez de teléfono. */
.rm-product--meetingvoice .rm-product__shots { display: block; width: 100%; max-width: 36rem; max-height: none; }

.rm-product--meetingvoice .rm-product__shots .rm-shot:nth-child(n + 2) { display: none; }

.rm-product--meetingvoice .rm-product__shots img {
  aspect-ratio: 16 / 10;
  object-position: left top;
  border-width: 4px;
  border-radius: 12px;
}

/* ==========================================================================
   3. Qué hacemos: cinco tarjetas con icono
   ========================================================================== */
.rm-services {
  padding-block: var(--rm-space-10);
  background: var(--rm-surface-sunken);
  border-block: 1px solid var(--rm-rule);
}

.rm-services__head {
  display: grid;
  gap: var(--rm-space-4);
  margin-bottom: var(--rm-space-7);
}

@media (min-width: 56em) {
  .rm-services__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
}

.rm-services__head h2 { margin: 0; font-size: var(--rm-text-3xl); }
.rm-services__head p { margin: 0; color: var(--rm-ink-muted); font-size: var(--rm-text-lg); }

.rm-svc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--rm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 68em) {
  .rm-svc { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rm-svc__card { grid-column: span 2; }
  .rm-svc__card:nth-child(4) { grid-column: 2 / span 2; }
}

.rm-svc__card {
  position: relative;
  padding: var(--rm-space-6);
  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),
              box-shadow var(--rm-duration) var(--rm-ease),
              transform var(--rm-duration) var(--rm-ease);
}

.rm-svc__card:hover {
  border-color: var(--rm-rule-strong);
  box-shadow: var(--rm-shadow-card);
  transform: translateY(-2px);
}

.rm-svc__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--rm-space-5);
  border-radius: 12px;
  background: var(--rm-accent-wash);
  color: var(--rm-accent);
}

.rm-svc__icon .rm-icon { width: 1.25rem; height: 1.25rem; }

.rm-svc__num {
  position: absolute;
  top: var(--rm-space-6);
  right: var(--rm-space-6);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  color: var(--rm-ink-subtle);
}

.rm-svc__title {
  margin: 0 0 var(--rm-space-2);
  font-size: var(--rm-text-lg);
  font-weight: 650;
}

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

/* Filas de etiquetas: sectores y tecnologías */
.rm-labels {
  display: grid;
  gap: var(--rm-space-3);
  margin-top: var(--rm-space-6);
}

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

.rm-labels__key {
  margin: 0;
  font-family: var(--rm-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rm-ink-subtle);
}

.rm-labels__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-labels__list li {
  padding: 4px 12px;
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
  font-size: var(--rm-text-xs);
  color: var(--rm-ink-muted);
}

.rm-services__foot { margin: var(--rm-space-7) 0 0; }

/* ==========================================================================
   4. Cómo trabajamos: cuatro pasos unidos por una línea
   ========================================================================== */
.rm-steps-band { padding-block: var(--rm-space-10); }

.rm-steps-band__head {
  display: grid;
  gap: var(--rm-space-3);
  margin-bottom: var(--rm-space-8);
}

.rm-steps-band__head h2 { margin: 0; font-size: var(--rm-text-3xl); }
.rm-steps-band__head p { margin: 0; color: var(--rm-ink-muted); font-size: var(--rm-text-lg); }

.rm-steps { display: grid; gap: var(--rm-space-6); }

.rm-step { position: relative; }

.rm-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--rm-space-4);
  border-radius: 50%;
  background: var(--rm-solid);
  color: var(--rm-solid-ink);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rm-step h3 {
  margin: 0 0 var(--rm-space-2);
  font-size: var(--rm-text-lg);
  font-weight: 650;
}

.rm-step p { margin: 0; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); max-width: 30ch; }

@media (min-width: 54em) {
  .rm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* La línea que une los pasos, detrás de los números. */
  .rm-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    left: 56px;
    right: calc(-1 * var(--rm-space-6) + 12px);
    height: 1px;
    background: linear-gradient(90deg, var(--rm-rule-strong), var(--rm-rule));
  }
}

/* ==========================================================================
   5. Quiénes somos
   ========================================================================== */
.rm-about {
  padding-block: var(--rm-space-10);
  border-top: 1px solid var(--rm-rule);
}

.rm-about__grid { display: grid; gap: var(--rm-space-7); }

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

.rm-about h2 { margin: 0 0 var(--rm-space-5); font-size: var(--rm-text-3xl); }

.rm-about__lead {
  max-width: 44ch;
  margin: 0 0 var(--rm-space-7);
  font-size: var(--rm-text-xl);
  font-weight: 500;
  line-height: var(--rm-leading-snug);
  letter-spacing: -0.015em;
  color: var(--rm-ink);
}

.rm-about__creed {
  display: grid;
  gap: var(--rm-space-2);
  margin: 0;
}

@media (min-width: 48em) {
  .rm-about__creed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: var(--rm-space-2) var(--rm-space-6);
  }
}

.rm-about__creed dt {
  margin-top: var(--rm-space-3);
  padding-top: var(--rm-space-4);
  border-top: 2px solid var(--rm-accent);
}

.rm-about__creed dd {
  max-width: 62ch;
  margin: 0;
  font-size: var(--rm-text-sm);
  color: var(--rm-ink-muted);
}

/* ==========================================================================
   6. Portal de privacidad: una sola fila en tarjeta
   ========================================================================== */
.rm-portal { padding-block: 0 var(--rm-space-9); }

.rm-portal__row {
  display: grid;
  gap: var(--rm-space-5);
  align-items: center;
  padding: var(--rm-space-6);
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-lg);
}

@media (min-width: 48em) {
  .rm-portal__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--rm-space-8); padding: var(--rm-space-6) var(--rm-space-7); }
}

.rm-portal .rm-eyebrow { margin-bottom: var(--rm-space-2); }

.rm-portal__title {
  margin: 0 0 var(--rm-space-2);
  font-size: var(--rm-text-lg);
  font-weight: 650;
}

.rm-portal p { margin: 0; max-width: 68ch; font-size: var(--rm-text-sm); color: var(--rm-ink-muted); }

/* ==========================================================================
   7. Cierre: panel oscuro con el mismo resplandor que la portada
   ========================================================================== */
.rm-close { padding-block: 0 var(--rm-space-10); }

.rm-close__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--rm-space-8) var(--rm-space-6);
  background: var(--rm-night);
  border-radius: var(--rm-radius-xl);
  color: var(--rm-night-muted);
}

@media (min-width: 48em) {
  .rm-close__panel { padding: var(--rm-space-10) var(--rm-space-9); }
}

.rm-close__glow {
  position: absolute;
  inset: -40% -20% auto 40%;
  z-index: -1;
  height: 160%;
  background:
    radial-gradient(40% 40% at 50% 40%, rgb(108 191 79 / 0.3), transparent 70%),
    radial-gradient(30% 30% at 80% 70%, rgb(56 120 255 / 0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.rm-close h2 { margin: 0 0 var(--rm-space-4); max-width: 18ch; color: var(--rm-night-ink); }

.rm-close__lead {
  max-width: 52ch;
  margin-bottom: var(--rm-space-6);
  font-size: var(--rm-text-lg);
  color: var(--rm-night-muted);
}

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

.rm-close__actions .btn-tech-primary,
.rm-close__actions .btn-tech-secondary { min-height: 48px; padding-inline: var(--rm-space-6); }

/* El acceso a /legal/ acompaña al cierre sin competir con los dos botones. */
.rm-close__legal {
  display: flex;
  gap: var(--rm-space-3);
  max-width: 68ch;
  margin: var(--rm-space-7) 0 0;
  font-size: var(--rm-text-sm);
  color: var(--rm-night-subtle);
}

.rm-close__panel a:not(.btn-tech-primary):not(.btn-tech-secondary) { color: var(--rm-night-ink); }

.rm-close__legal-icon { margin-top: 0.28em; color: var(--rm-night-subtle); }

.rm-close__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2) var(--rm-space-5);
  margin: var(--rm-space-6) 0 0;
  padding-top: var(--rm-space-5);
  border-top: 1px solid var(--rm-night-rule);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
}