/* Reseller Express — sistema visual V3 (C160-C164).
 * Premium AI-commerce: navy muy oscuro, cian electrico como unica accion,
 * mucho espacio, superficies elevadas en vez de tarjetas con borde denso.
 * Tipografia: Inter self-hosted (../fonts/, SIL OFL 1.1) — sin origen externo. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700.woff2") format("woff2");
}

:root {
  /* Tokens centralizados (C160, Parte B) — todo color/tamaño del sitio
     se deriva de aquí, nunca valores sueltos en los componentes. */
  --rx-bg: #05070f;
  --rx-surface: #0b0f1f;
  --rx-surface-elevated: #131a33;
  --rx-text: #f2f4fc;
  --rx-text-muted: #9aa4c7;
  --rx-primary: #22c3f5;
  --rx-primary-hover: #5bd4ff;
  --rx-primary-ink: #04121a;
  --rx-border: rgba(255, 255, 255, 0.09);
  --rx-border-strong: rgba(255, 255, 255, 0.16);
  --rx-radius-sm: 8px;
  --rx-radius-md: 16px;
  --rx-radius-lg: 28px;
  --rx-shadow: 0 30px 80px -32px rgba(0, 0, 0, 0.6);
  --rx-content-width: 1200px;
  --rx-section-gap: clamp(64px, 9vw, 128px);
  --rx-focus: #ffb703;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--rx-bg);
  color: var(--rx-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--rx-primary); }

.rx-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rx-primary);
  color: var(--rx-primary-ink);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--rx-radius-sm) 0;
  font-weight: 600;
}
.rx-skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--rx-focus);
  outline-offset: 2px;
}

.rx-container {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Botones ────────────────────────────────────────────────────────── */
.rx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15.5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rx-btn:active { transform: translateY(1px); }
.rx-btn-primary { background: var(--rx-primary); color: var(--rx-primary-ink); }
.rx-btn-primary:hover { background: var(--rx-primary-hover); }
.rx-btn-outline { background: transparent; color: var(--rx-text); border-color: var(--rx-border-strong); }
.rx-btn-outline:hover { border-color: var(--rx-primary); color: var(--rx-primary); }
.rx-btn-lg { padding: 16px 32px; font-size: 17px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.rx-header {
  background: rgba(5, 7, 15, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rx-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.rx-header-inner {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.rx-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--rx-text);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
/* V3.1, Parte 1: +15% de presencia (46px icono / 23px wordmark, antes
   40px/20px) sin aumentar la altura del header de forma notoria
   (padding vertical 14->12px compensa el icono mas grande). */
.rx-logo img { height: 46px; width: 46px; border-radius: 11px; }

.rx-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--rx-radius-sm);
  border: 1px solid var(--rx-border-strong);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.rx-nav-toggle-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--rx-text);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.rx-nav-toggle-bar:nth-child(1) { top: 14px; }
.rx-nav-toggle-bar:nth-child(2) { top: 21px; }
.rx-nav-toggle-bar:nth-child(3) { top: 28px; }
.rx-nav-toggle[aria-expanded="true"] .rx-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rx-nav-toggle[aria-expanded="true"] .rx-nav-toggle-bar:nth-child(2) { opacity: 0; }
.rx-nav-toggle[aria-expanded="true"] .rx-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rx-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.rx-nav a {
  color: var(--rx-text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}
.rx-nav a:hover { color: var(--rx-text); }
.rx-nav-links { display: flex; align-items: center; gap: 28px; }
.rx-lang-switch {
  display: flex;
  gap: 2px;
  border: 1px solid var(--rx-border-strong);
  border-radius: 999px;
  padding: 3px;
}
.rx-lang-switch button {
  border: none;
  background: none;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rx-text-muted);
  border-radius: 999px;
  cursor: pointer;
}
.rx-lang-switch button.is-active { background: var(--rx-text); color: var(--rx-bg); }

@media (max-width: 860px) {
  .rx-nav-toggle { display: block; }
  .rx-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--rx-surface);
    border-bottom: 1px solid var(--rx-border);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px 20px 20px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .rx-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .rx-nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
  .rx-nav-links a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--rx-border);
    font-size: 16px;
  }
  .rx-lang-switch { align-self: flex-start; margin: 12px 4px; }
  .rx-nav .rx-btn { margin: 4px; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.rx-hero {
  position: relative;
  overflow: hidden;
  /* V3.1, Parte 2: menos espacio muerto vertical (era 48-88px abajo). */
  padding: clamp(52px, 8vw, 100px) 24px clamp(36px, 5vw, 64px);
  background:
    radial-gradient(60% 55% at 82% 8%, rgba(34, 195, 245, 0.16), transparent 60%),
    linear-gradient(180deg, #070a16 0%, var(--rx-bg) 100%);
}
.rx-hero-inner {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  display: grid;
  /* V3.1: imagen ~44% del ancho util (antes 47.5%, ya rozaba el limite
     superior del rango 42-48% pedido). */
  grid-template-columns: 1.2fr 0.9fr;
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
}
.rx-hero-eyebrow {
  color: var(--rx-primary);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.rx-hero h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.rx-hero p {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--rx-text-muted);
  margin-bottom: 32px;
  max-width: 46ch;
}
.rx-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.rx-hero-disclaimer { font-size: 13px; color: var(--rx-text-muted); max-width: 46ch; }

.rx-hero-image { position: relative; }
.rx-hero-image::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: radial-gradient(closest-side, rgba(34, 195, 245, 0.22), transparent 72%);
  z-index: 0;
}
.rx-hero-image img {
  position: relative;
  z-index: 1;
  border-radius: var(--rx-radius-lg);
  /* V3.1: fade mas tardio (era 82%) - menos "zona muerta" difuminada
     bajo la foto, la mascara sigue evitando el efecto tarjeta. */
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}

.rx-hero-signals {
  max-width: var(--rx-content-width);
  margin: clamp(32px, 5vw, 56px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rx-border);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  overflow: hidden;
}
.rx-signal {
  background: var(--rx-surface);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--rx-text-muted);
}
.rx-signal svg { flex-shrink: 0; color: var(--rx-primary); }

@media (max-width: 860px) {
  .rx-hero-inner { grid-template-columns: 1fr; }
  .rx-hero-image { order: 2; margin-top: 8px; }
  .rx-hero-ctas .rx-btn { flex: 1 1 auto; justify-content: center; }
  .rx-hero-signals { grid-template-columns: 1fr; }
}

/* ── Secciones generales ────────────────────────────────────────────── */
.rx-section { padding: var(--rx-section-gap) 24px; position: relative; }
/* V3.1, Parte 4: ritmo entre secciones via un divisor de gradiente muy
   sutil (nunca un borde solido) en vez de mas tarjetas/efectos. */
.rx-section-elevated {
  background: var(--rx-surface);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--rx-border) 20%, var(--rx-border) 80%, transparent) 1;
}
.rx-section-header { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.rx-eyebrow {
  color: var(--rx-primary);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rx-section h2 {
  font-size: clamp(28px, 3.8vw, 44px);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.rx-section-header p { color: var(--rx-text-muted); font-size: clamp(16px, 1.4vw, 18px); }

/* ── Trust strip (Parte F) ──────────────────────────────────────────── */
.rx-trust {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: center;
  border-top: 1px solid var(--rx-border);
  border-bottom: 1px solid var(--rx-border);
}
.rx-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--rx-text-muted);
}
.rx-trust-item svg { color: var(--rx-primary); flex-shrink: 0; }

/* ── Proceso alternado (Parte G) ────────────────────────────────────── */
.rx-process { max-width: var(--rx-content-width); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.rx-process-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.rx-process-row.is-reverse .rx-process-media { order: -1; }
.rx-process-media img {
  border-radius: var(--rx-radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--rx-shadow);
}
.rx-process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--rx-surface-elevated);
  border: 1px solid var(--rx-border-strong);
  color: var(--rx-primary);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
}
.rx-process-copy h3 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.01em; margin-bottom: 12px; }
.rx-process-copy p { color: var(--rx-text-muted); font-size: 16.5px; max-width: 44ch; }

.rx-process-final {
  max-width: var(--rx-content-width);
  margin: clamp(48px, 7vw, 88px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.rx-process-final-card {
  background: var(--rx-surface-elevated);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  padding: 32px;
}
.rx-process-final-card h3 { font-size: 20px; margin-bottom: 10px; }
.rx-process-final-card p { color: var(--rx-text-muted); font-size: 15.5px; }
.rx-process-final-note { grid-column: 1 / -1; font-size: 13.5px; color: var(--rx-text-muted); text-align: center; margin-top: 4px; }

@media (max-width: 780px) {
  .rx-process-row { grid-template-columns: 1fr; }
  .rx-process-row.is-reverse .rx-process-media { order: 0; }
  .rx-process-final { grid-template-columns: 1fr; }
}

/* ── Modalidades (Parte H) ──────────────────────────────────────────── */
.rx-modalities {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rx-modality {
  background: var(--rx-surface-elevated);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rx-modality h3 { font-size: 20px; }
.rx-modality dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.rx-modality dt { color: var(--rx-text-muted); font-weight: 600; }
.rx-modality dd { color: var(--rx-text); }
@media (max-width: 900px) { .rx-modalities { grid-template-columns: 1fr; } }

/* ── Beneficios agrupados (Parte I) ─────────────────────────────────── */
.rx-benefit-groups {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.rx-benefit-group h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rx-primary);
  margin-bottom: 16px;
}
.rx-benefit-group ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.rx-benefit-group li { padding-left: 26px; position: relative; color: var(--rx-text); font-size: 16px; }
.rx-benefit-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rx-primary);
}
@media (max-width: 860px) { .rx-benefit-groups { grid-template-columns: 1fr; gap: 40px; } }

/* ── Privacidad y control (Parte J) ─────────────────────────────────── */
.rx-privacy-section {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  background: var(--rx-surface-elevated);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-lg);
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.rx-privacy-copy h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.01em; margin-bottom: 16px; }
.rx-privacy-copy p { color: var(--rx-text-muted); font-size: 16.5px; margin-bottom: 20px; max-width: 46ch; }
.rx-privacy-steps { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.rx-privacy-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--rx-text); }
.rx-privacy-steps .rx-step-dot {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: rgba(34, 195, 245, 0.14);
  color: var(--rx-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
@media (max-width: 860px) { .rx-privacy-section { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.rx-faq { max-width: 760px; margin: 0 auto; }
.rx-faq details {
  border-bottom: 1px solid var(--rx-border);
  padding: 20px 0;
}
.rx-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rx-text);
  font-size: 16.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.rx-faq summary::-webkit-details-marker { display: none; }
.rx-faq summary::after {
  content: "+";
  color: var(--rx-primary);
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.rx-faq details[open] summary::after { content: "\2212"; }
.rx-faq p { margin-top: 12px; color: var(--rx-text-muted); font-size: 15.5px; max-width: 64ch; }

/* ── CTA final ──────────────────────────────────────────────────────── */
.rx-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(64px, 9vw, 112px) 24px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(34, 195, 245, 0.14), transparent 65%), var(--rx-surface);
  border-top: 1px solid var(--rx-border);
}
.rx-cta h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.015em; margin-bottom: 16px; text-wrap: balance; }
.rx-cta p { color: var(--rx-text-muted); margin-bottom: 32px; max-width: 52ch; margin-left: auto; margin-right: auto; font-size: 17px; }
.rx-cta-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.rx-footer {
  background: var(--rx-bg);
  border-top: 1px solid var(--rx-border);
  padding: 44px 24px;
}
.rx-footer-inner {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.rx-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.rx-footer-links a { color: var(--rx-text-muted); text-decoration: none; font-size: 14px; }
.rx-footer-links a:hover { color: var(--rx-primary); }
.rx-footer-meta { font-size: 13px; color: var(--rx-text-muted); text-align: right; }

/* ── Páginas de contenido: componentes editoriales (Parte L) ─────────── */
.rx-public-page-hero {
  padding: clamp(48px, 7vw, 88px) 24px clamp(32px, 5vw, 56px);
  text-align: center;
  background: radial-gradient(60% 100% at 50% 0%, rgba(34, 195, 245, 0.12), transparent 65%);
}
.rx-public-page-hero .rx-eyebrow { justify-content: center; }
.rx-public-page-hero h1 { font-size: clamp(32px, 4.5vw, 52px); letter-spacing: -0.02em; margin-bottom: 14px; text-wrap: balance; }
.rx-public-page-hero p { color: var(--rx-text-muted); font-size: clamp(16px, 1.4vw, 18px); max-width: 56ch; margin: 0 auto; }
.rx-public-page-hero .rx-doc-updated { color: var(--rx-text-muted); font-size: 13px; margin-top: 12px; }

.rx-content-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 24px clamp(56px, 8vw, 96px);
}
/* V3.1, Parte 3: body 16.5->17.5px, mayor separacion entre secciones
   (36->44px arriba de cada h2). */
.rx-content-shell h2 { font-size: 22px; letter-spacing: -0.01em; margin: 44px 0 14px; }
.rx-content-shell p, .rx-content-shell li { color: var(--rx-text-muted); font-size: 17.5px; margin-bottom: 15px; line-height: 1.75; }
.rx-content-shell ol, .rx-content-shell ul { padding-left: 24px; margin-bottom: 16px; }
.rx-content-shell a { text-decoration-color: rgba(34, 195, 245, 0.4); }

.rx-legal-section {
  background: var(--rx-surface);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 28px;
}
.rx-legal-section h2 { margin-top: 0 !important; }

.rx-doc .rx-notice,
.rx-content-shell .rx-notice {
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.35);
  border-radius: var(--rx-radius-sm);
  padding: 16px 20px;
  font-size: 14px;
  color: #ffd27a;
  margin: 24px 0;
}
/* Contenedor de una captura de tutorial aprobada. Sin imagen real todavia
   en /tutorials/screenshots/<id>.png -> onerror en el <img> retira este
   div entero del DOM, sin caja vacia ni icono de imagen rota. En cuanto
   se agregue el archivo real, aparece automaticamente, sin tocar HTML. */
.rx-tutorial-screenshot { margin: 16px 0; }
.rx-tutorial-screenshot img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--rx-radius-sm);
  border: 1px solid var(--rx-border);
}
.rx-tutorial-note {
  color: var(--rx-text-muted);
  font-size: 14px;
  font-style: italic;
  border-left: 2px solid var(--rx-border-strong);
  padding-left: 12px;
  margin: 8px 0 28px;
}

/* Legacy alias (algunas páginas todavía usan .rx-doc para el contenedor) */
.rx-doc { max-width: 720px; margin: 0 auto; padding: 8px 24px clamp(56px, 8vw, 96px); }
.rx-doc h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.02em; margin-bottom: 10px; }
.rx-doc .rx-doc-subtitle { color: var(--rx-text-muted); margin-bottom: 12px; font-size: 17px; }
.rx-doc .rx-doc-updated { color: var(--rx-text-muted); font-size: 13px; margin: 0 0 32px; }
.rx-doc h2 { font-size: 22px; letter-spacing: -0.01em; margin: 44px 0 14px; }
.rx-doc p, .rx-doc li { color: var(--rx-text-muted); font-size: 17.5px; margin-bottom: 15px; line-height: 1.75; }
.rx-doc ol, .rx-doc ul { padding-left: 24px; margin-bottom: 16px; }

/* ── Help Center / Tutoriales ───────────────────────────────────────── */
.rx-help-layout {
  max-width: var(--rx-content-width);
  margin: 0 auto;
  padding: 8px 24px clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
.rx-help-sidebar,
.rx-help-nav {
  position: sticky;
  top: 96px;
  background: var(--rx-surface);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  padding: 18px;
}
.rx-help-sidebar p,
.rx-help-nav p { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rx-text-muted); margin-bottom: 12px; font-weight: 700; }
.rx-help-sidebar a,
.rx-help-nav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--rx-radius-sm);
  color: var(--rx-text-muted);
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 2px;
}
.rx-help-sidebar a:hover,
.rx-help-nav a:hover { background: var(--rx-surface-elevated); color: var(--rx-text); }
.rx-help-sidebar a[aria-current="page"],
.rx-help-nav a[aria-current="page"] { background: var(--rx-primary); color: var(--rx-primary-ink); font-weight: 600; }
.rx-help-content h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.015em; margin-bottom: 10px; }
.rx-help-content .rx-doc-subtitle { color: var(--rx-text-muted); margin-bottom: 28px; font-size: 17px; }
.rx-help-content h2 { font-size: 20px; margin: 38px 0 12px; }
.rx-help-content p, .rx-help-content li { color: var(--rx-text-muted); font-size: 17px; margin-bottom: 13px; line-height: 1.7; }
.rx-help-content ol, .rx-help-content ul { padding-left: 22px; margin-bottom: 16px; }

.rx-content-navigation {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rx-border);
  font-size: 14px;
}
.rx-content-navigation a { color: var(--rx-text-muted); text-decoration: none; }
.rx-content-navigation a:hover { color: var(--rx-primary); }

.rx-tutorial-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.rx-tutorial-progress span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--rx-border);
}
.rx-tutorial-progress span.is-complete { background: var(--rx-primary); }
.rx-tutorial-progress span.is-current { background: var(--rx-text); }

.rx-tutorial-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--rx-text-muted);
  background: var(--rx-surface);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-sm);
  padding: 14px 18px;
  margin-bottom: 24px;
}
.rx-tutorial-meta strong { color: var(--rx-text); }

.rx-next-step-card {
  display: block;
  background: var(--rx-surface-elevated);
  border: 1px solid var(--rx-border);
  border-radius: var(--rx-radius-md);
  padding: 22px 26px;
  margin-top: 32px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.rx-next-step-card:hover { border-color: var(--rx-primary); }
.rx-next-step-card .rx-eyebrow { margin-bottom: 6px; }
.rx-next-step-card strong { color: var(--rx-text); font-size: 17px; }

@media (max-width: 780px) {
  .rx-help-layout { grid-template-columns: 1fr; }
  .rx-help-sidebar, .rx-help-nav { position: static; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}