/* ============================================================
   ReCoIn · Capa de landing v1.0  ·  superficie BRAND
   ------------------------------------------------------------
   Solo la portada. Carga después de recoin-doc.css:

     recoin-tokens.css → recoin-ui.css → recoin-doc.css → recoin-site.css

   Cero hex literales: todo sale de los tokens.
   ============================================================ */

section { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Aparición al hacer scroll
   Desplazamiento corto y seco: 14px y 320ms. El bloque llega a
   su sitio, no se desliza dentro de la pantalla.
   ------------------------------------------------------------ */
.rv {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--rc-t-slow), transform var(--rc-t-slow);
  will-change: opacity, transform;
}
.rv.vis { opacity: 1; transform: none; }
.rv.vis { will-change: auto; }

/* Barra de progreso de lectura, pegada bajo la barra superior */
.scrollbar {
  position: fixed; top: 64px; left: 0; z-index: 801;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--rc-amber);
  pointer-events: none;
}

/* El halo del hero se desplaza a media velocidad al hacer scroll */
#hero::before { will-change: transform; }

/* Cifras y tarjetas: entrada escalonada dentro de su rejilla */
.rv[data-d="1"] { transition-delay: 60ms; }
.rv[data-d="2"] { transition-delay: 120ms; }
.rv[data-d="3"] { transition-delay: 180ms; }
.rv[data-d="4"] { transition-delay: 240ms; }
.rv[data-d="5"] { transition-delay: 300ms; }
.rv[data-d="6"] { transition-delay: 360ms; }
.rv[data-d="7"] { transition-delay: 420ms; }

/* Marca de sección: la línea del eyebrow se dibuja al entrar */
.slabel::before { transition: width var(--rc-t-slow); }
.rv .slabel::before { width: 0; }
.rv.vis .slabel::before { width: 24px; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .rv .slabel::before, .rv.vis .slabel::before { width: 24px; }
  .scrollbar { display: none; }
}

/* ------------------------------------------------------------
   1 · BOTONES
   --credit mueve dinero (ámbar) · --ghost no cambia nada
   ------------------------------------------------------------ */
.rc-brand .btn-main, .rc-brand .btn-sec, .rc-brand .pcta {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--rc-r-md);
  height: var(--rc-tap);
  padding: 0 var(--rc-sp-5);
  border: var(--rc-bw) solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rc-sp-2);
  transition: background var(--rc-t-fast), color var(--rc-t-fast), border-color var(--rc-t-fast);
}
.rc-brand .btn-main { background: var(--rc-amber); color: var(--rc-brand-bg); }
.rc-brand .btn-main:hover { background: var(--rc-amber-hi); color: var(--rc-brand-bg); }
.rc-brand .btn-sec { background: transparent; color: var(--rc-text-2); border-color: var(--s-line); }
.rc-brand .btn-sec:hover { color: var(--s-text); border-color: var(--rc-text-off); }
.rc-brand .btn-main:focus-visible, .rc-brand .btn-sec:focus-visible, .rc-brand .pcta:focus-visible { outline: none; box-shadow: var(--rc-focus); }

/* ------------------------------------------------------------
   2 · HERO — único degradado de toda la web
   ------------------------------------------------------------ */
#hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: calc(64px + var(--rc-sp-7)) var(--rc-sp-6) var(--rc-sp-8);
  position: relative; overflow: hidden;
}
#hero::before {
  content: ''; position: absolute;
  left: 50%; top: -220px; width: min(900px, 150vw); height: 600px;
  transform: translate3d(-50%, var(--rc-paralaje, 0px), 0);
  background: radial-gradient(ellipse at center, var(--rc-signal-wash), transparent 65%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--rc-signal) 10%, transparent), transparent 65%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  width: 100%; max-width: var(--rc-max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--rc-sp-8); align-items: center;
}
.h-tag {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  text-transform: uppercase;
  color: var(--rc-signal);
  margin-bottom: var(--rc-sp-5);
  display: flex; align-items: center; gap: var(--rc-sp-2);
}
/* Punto de estado vivo: al lado del texto, nunca dentro del logo */
.h-tag .bl {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rc-signal);
  box-shadow: 0 0 8px var(--rc-signal);
  animation: rc-breathe 2.4s ease-in-out infinite;
  flex: none;
}
@media (prefers-reduced-motion: reduce) { .h-tag .bl { animation: none; } }

#hero h1 {
  font-family: var(--rc-font-display);
  font-size: clamp(56px, 9vw, 104px);
  line-height: .95;
  letter-spacing: var(--rc-ls-display);
  color: var(--s-text);
  margin: 0 0 var(--rc-sp-5);
}
#hero h1 em { color: var(--rc-amber); font-style: normal; display: block; }
#hero h1 .out { color: var(--rc-text-4); display: block; }
.hero-desc {
  font-size: var(--rc-fs-body);
  line-height: var(--rc-lh-read);
  color: var(--rc-text-2);
  max-width: 52ch;
  margin: 0 0 var(--rc-sp-6);
}
.hbtns { display: flex; gap: var(--rc-sp-3); flex-wrap: wrap; }

/* ------------------------------------------------------------
   4 · TICKER
   ------------------------------------------------------------ */
.ticker-wrap {
  position: relative; z-index: 1;
  background: var(--s-surface);
  border-block: var(--rc-bw) solid var(--s-line);
  padding: var(--rc-sp-3) 0;
  overflow: hidden;
}
.ticker { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ti {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-2);
  padding: 0 var(--rc-sp-6);
  display: flex; align-items: center; gap: var(--rc-sp-3);
  white-space: nowrap;
}
.ti span { color: var(--rc-amber-mid); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } }

/* ------------------------------------------------------------
   5 · SECCIONES
   ------------------------------------------------------------ */
#dashboard, #sistema, #problemas, #numeros, #planes, #hardware, #contacto {
  padding: 96px 0;
  border-top: var(--rc-bw) solid var(--s-line);
}
.sec-desc {
  font-size: var(--rc-fs-body);
  line-height: var(--rc-lh-read);
  color: var(--rc-text-2);
  max-width: 62ch;
  margin: var(--rc-sp-2) 0 0;
}

/* Panel de control */
.dash-grid {
  display: grid; gap: var(--rc-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-top: var(--rc-sp-7);
}
.dcard {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  display: flex; flex-direction: column; gap: var(--rc-sp-2);
}
.dc-label {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  font-weight: var(--rc-fw-med);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
}
.dc-val {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-hero);
  line-height: 1;
  color: var(--rc-text);
}
.dc-val em { font-size: var(--rc-fs-lg); color: var(--rc-text-3); font-style: normal; }
.dc-val.rc-money { color: var(--rc-amber); }
.dc-val.rc-money em { color: var(--rc-amber-mid); }
.dc-sub { font-family: var(--rc-font-data); font-size: var(--rc-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--rc-text-4); }
.dc-sub.up { color: var(--rc-signal); }
canvas.spark { height: 40px; width: 100%; display: block; margin-top: auto; }

/* ------------------------------------------------------------
   6 · MÓDULOS
   ------------------------------------------------------------ */
.mod-tabs {
  display: flex; flex-wrap: wrap; gap: var(--rc-sp-2);
  margin-top: var(--rc-sp-7);
}
.mod-tab {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--rc-r-pill);
  padding: var(--rc-sp-2) var(--rc-sp-3);
  min-height: 32px;
  border: var(--rc-bw) solid var(--s-line);
  background: transparent;
  color: var(--rc-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rc-t-fast), color var(--rc-t-fast), border-color var(--rc-t-fast);
}
.mod-tab:hover { color: var(--s-text); border-color: var(--rc-text-off); }
.mod-tab.active { background: var(--rc-amber); color: var(--rc-brand-bg); border-color: transparent; }
.mod-tab:focus-visible { outline: none; box-shadow: var(--rc-focus); }

.mod-panel { display: none; padding-top: var(--rc-sp-7); }
.mod-panel.active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--rc-sp-8);
  align-items: start;
}
.mp-eyebrow {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  text-transform: uppercase;
  color: var(--rc-text-4);
  margin-bottom: var(--rc-sp-3);
}
.mp-title {
  font-size: var(--rc-fs-hero);
  font-weight: var(--rc-fw-semi);
  line-height: 1.15;
  color: var(--s-text);
  margin-bottom: var(--rc-sp-4);
  text-wrap: balance;
}
.mp-body { font-size: var(--rc-fs-body); line-height: var(--rc-lh-read); color: var(--rc-text-2); margin-bottom: var(--rc-sp-6); max-width: 62ch; }
.mp-body strong { color: var(--s-text); font-weight: var(--rc-fw-med); }
.mp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mp-list li {
  font-size: var(--rc-fs-sm); color: var(--rc-text-2); line-height: var(--rc-lh-read);
  padding: var(--rc-sp-3) 0;
  border-bottom: var(--rc-bw) solid var(--s-line);
  display: flex; align-items: flex-start; gap: var(--rc-sp-3);
}
.mp-list li:first-child { border-top: var(--rc-bw) solid var(--s-line); }
.mp-check {
  width: 14px; height: 14px; flex: none; margin-top: 5px;
  border-radius: var(--rc-r-sm);
  background: var(--rc-amber-bg);
  border: var(--rc-bw) solid var(--rc-amber-line);
}

.mp-visual {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  display: flex; flex-direction: column; gap: var(--rc-sp-4);
  min-height: 280px;
}
.mpv-label {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  font-weight: var(--rc-fw-med);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
  padding-bottom: var(--rc-sp-3);
  border-bottom: var(--rc-bw) solid var(--s-line);
}
.mpv-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--rc-sp-3);
  padding: var(--rc-sp-2) 0;
  border-bottom: var(--rc-bw) solid var(--s-line-soft);
}
.mpv-row:last-child { border-bottom: none; }
.mpv-key { font-size: var(--rc-fs-sm); color: var(--rc-text-2); }
.mpv-val { font-family: var(--rc-font-data); font-size: var(--rc-fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--rc-text); text-align: right; }
.mpv-val.gold  { color: var(--rc-amber); }
.mpv-val.green { color: var(--rc-signal); }

.mpv-bw { display: flex; flex-direction: column; gap: var(--rc-sp-1); }
.mpv-bh { display: flex; justify-content: space-between; font-size: var(--rc-fs-sm); }
.mpv-bn { color: var(--rc-text-2); }
.mpv-bp { font-family: var(--rc-font-data); font-variant-numeric: tabular-nums; color: var(--rc-signal); }
.mpv-bt { height: 3px; background: var(--s-line); border-radius: 1px; overflow: hidden; }
.mpv-bf { height: 100%; background: var(--rc-signal); }

.mpv-stat { text-align: center; padding: var(--rc-sp-5) 0; }
.mpv-sv {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-mega);
  line-height: 1;
  color: var(--rc-signal);
}
.mpv-sv em { font-size: var(--rc-fs-data); color: var(--rc-text-3); font-style: normal; }
.mpv-sl { font-size: var(--rc-fs-sm); color: var(--rc-text-2); margin-top: var(--rc-sp-2); }

/* ------------------------------------------------------------
   7 · PROBLEMAS
   ------------------------------------------------------------ */
.prob-grid {
  display: grid; gap: var(--rc-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: var(--rc-sp-7);
}
.prob-card {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  transition: border-color var(--rc-t-fast);
}
.prob-card:hover { border-color: var(--rc-text-off); }
.prob-num {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  color: var(--rc-amber);
  display: block;
  margin-bottom: var(--rc-sp-3);
}
.prob-title { font-size: var(--rc-fs-lg); font-weight: var(--rc-fw-semi); color: var(--s-text); margin-bottom: var(--rc-sp-2); }
.prob-desc { font-size: var(--rc-fs-sm); line-height: var(--rc-lh-read); color: var(--rc-text-2); margin: 0; }

/* ------------------------------------------------------------
   8 · CIFRAS
   ------------------------------------------------------------ */
.cnt-grid {
  display: grid; gap: var(--rc-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.ccard {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-6) var(--rc-sp-5);
  text-align: center;
  display: flex; flex-direction: column; gap: var(--rc-sp-2);
}
.cval {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(32px, 4vw, var(--rc-fs-mega));
  line-height: 1;
  color: var(--rc-text);
  display: block;
}
.cval.rc-money { color: var(--rc-amber); }
.cval em { font-size: var(--rc-fs-lg); color: var(--rc-text-3); font-style: normal; }
.cval.rc-money em { color: var(--rc-amber-mid); }
.clbl {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
  display: block;
}
.csub { font-size: var(--rc-fs-sm); color: var(--rc-text-4); display: block; }

/* ------------------------------------------------------------
   9 · PLANES
   ------------------------------------------------------------ */
.planes-grid {
  display: grid; gap: var(--rc-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin-top: var(--rc-sp-7);
  max-width: 1000px;
}
.pcard {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-6) var(--rc-sp-5);
  display: flex; flex-direction: column;
  transition: border-color var(--rc-t-fast);
}
.pcard:hover { border-color: var(--rc-text-off); }
/* Único halo de la pantalla: el plan recomendado */
.pcard.feat { border-color: transparent; box-shadow: var(--rc-glow-amber); }
.pbadge {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  text-transform: uppercase;
  color: var(--rc-amber);
  margin-bottom: var(--rc-sp-2);
}
.pname { font-size: var(--rc-fs-lg); font-weight: var(--rc-fw-semi); color: var(--s-text); margin-bottom: var(--rc-sp-4); }
.pprice {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-mega);
  line-height: 1;
  color: var(--rc-amber);
}
.pprice sup { font-size: var(--rc-fs-lg); vertical-align: super; }
.pprice .per { font-size: var(--rc-fs-sm); color: var(--rc-text-3); }
.pquote {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-data);
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--rc-amber);
}
.pannual {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: .08em;
  color: var(--rc-text-4);
  margin: var(--rc-sp-2) 0 var(--rc-sp-5);
}
.pfeats { list-style: none; margin: 0 0 var(--rc-sp-5); padding: 0; }
.pfeats li {
  font-size: var(--rc-fs-sm); color: var(--rc-text-2);
  padding: var(--rc-sp-2) 0;
  border-bottom: var(--rc-bw) solid var(--s-line-soft);
  display: flex; align-items: center; gap: var(--rc-sp-2);
}
.pfeats li::before {
  content: ''; width: 4px; height: 4px; flex: none;
  background: var(--rc-amber-mid);
}
.pfeats li.plus { color: var(--s-text); }
.pfeats li.plus::before { background: var(--rc-signal); }
.rc-brand .pcta { margin-top: auto; background: transparent; color: var(--rc-text-2); border-color: var(--s-line); }
.rc-brand .pcta:hover { color: var(--s-text); border-color: var(--rc-text-off); }
.rc-brand .pcta.gold { background: var(--rc-amber); color: var(--rc-brand-bg); border-color: transparent; }
.rc-brand .pcta.gold:hover { background: var(--rc-amber-hi); color: var(--rc-brand-bg); }

.sumup-row {
  max-width: 1000px;
  margin-top: var(--rc-sp-4);
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--rc-sp-4);
}
.sumup-badge {
  display: inline-flex; align-items: center; gap: var(--rc-sp-2);
  background: var(--rc-signal-bg);
  border: var(--rc-bw) solid var(--rc-signal-line);
  border-radius: var(--rc-r-sm);
  padding: var(--rc-sp-1) var(--rc-sp-3);
}
.sumup-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--rc-signal); box-shadow: 0 0 8px var(--rc-signal);
  animation: rc-breathe 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .sumup-dot { animation: none; } }
.sumup-tag {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rc-signal);
}
.sumup-title { font-size: var(--rc-fs-lg); font-weight: var(--rc-fw-semi); color: var(--s-text); margin-bottom: var(--rc-sp-1); }
.sumup-sub { font-size: var(--rc-fs-sm); color: var(--rc-text-2); }

/* ------------------------------------------------------------
   10 · HARDWARE
   ------------------------------------------------------------ */
.kit-base {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--rc-sp-7);
  align-items: start;
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-7);
  margin-top: var(--rc-sp-7);
}
.kb-title { font-size: var(--rc-fs-hero); font-weight: var(--rc-fw-semi); color: var(--s-text); margin-bottom: var(--rc-sp-4); }
.kb-desc { font-size: var(--rc-fs-body); line-height: var(--rc-lh-read); color: var(--rc-text-2); margin-bottom: var(--rc-sp-5); max-width: 62ch; }
.kb-feats { list-style: none; margin: 0; padding: 0; }
.kb-feats li {
  font-size: var(--rc-fs-sm); color: var(--rc-text-2); line-height: var(--rc-lh-read);
  padding: var(--rc-sp-3) 0;
  border-bottom: var(--rc-bw) solid var(--s-line);
  display: flex; align-items: flex-start; gap: var(--rc-sp-3);
}
.kb-feats li:first-child { border-top: var(--rc-bw) solid var(--s-line); }
.kb-feats li::before { content: ''; width: 4px; height: 4px; flex: none; margin-top: 9px; background: var(--rc-amber-mid); }

.kb-right {
  background: var(--rc-brand-bg);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-6);
  display: flex; flex-direction: column; gap: var(--rc-sp-2);
}
.kb-price-label {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
}
.kb-price {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-mega);
  line-height: 1;
  color: var(--rc-amber);
}
.kb-price em { font-size: var(--rc-fs-data); font-style: normal; }
.kb-quote {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-hero);
  line-height: 1;
  color: var(--rc-amber);
}
.kb-price-note { font-family: var(--rc-font-data); font-size: var(--rc-fs-sm); color: var(--rc-text-2); }
.kb-price-sub  { font-family: var(--rc-font-data); font-size: var(--rc-fs-micro); letter-spacing: .08em; color: var(--rc-text-4); }
.kb-right .btn-main { margin-top: var(--rc-sp-4); align-self: flex-start; }

.hw-grid {
  display: grid; gap: var(--rc-sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-top: var(--rc-sp-6);
}
.hcard {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-4);
  transition: border-color var(--rc-t-fast), background var(--rc-t-fast);
}
.hcard:hover { border-color: var(--rc-text-off); }
.hname { font-size: var(--rc-fs-body); font-weight: var(--rc-fw-semi); color: var(--s-text); margin-bottom: var(--rc-sp-1); }
.hdesc { font-size: var(--rc-fs-sm); line-height: var(--rc-lh-read); color: var(--rc-text-2); margin: 0; }
.hprice { font-family: var(--rc-font-data); font-variant-numeric: tabular-nums; font-size: var(--rc-fs-sm); color: var(--rc-amber); }
.hprice.b { color: var(--rc-text-3); }

.inst-strip {
  margin-top: var(--rc-sp-4);
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--rc-sp-5);
}
.is-lbl {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
  margin-bottom: var(--rc-sp-2);
}
.is-val { font-family: var(--rc-font-data); font-variant-numeric: tabular-nums; font-size: var(--rc-fs-data); line-height: 1.2; color: var(--rc-text); }
.is-val.gold  { color: var(--rc-amber); }
.is-val.green { color: var(--rc-signal); }
.is-sub { font-size: var(--rc-fs-sm); color: var(--rc-text-2); margin-top: var(--rc-sp-1); }

/* ------------------------------------------------------------
   11 · CONTACTO
   ------------------------------------------------------------ */
#contacto { text-align: center; }
.c-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 var(--rc-sp-6); }
#contacto .slabel { justify-content: center; }
.ctitle {
  font-family: var(--rc-font-display);
  font-size: clamp(40px, 7vw, var(--rc-fs-giga));
  letter-spacing: var(--rc-ls-display);
  line-height: 1;
  color: var(--s-text);
  margin-bottom: var(--rc-sp-5);
  text-wrap: balance;
}
.ctitle em { color: var(--rc-amber); font-style: normal; }
#contacto .csub { font-size: var(--rc-fs-body); color: var(--rc-text-2); line-height: var(--rc-lh-read); margin: 0 0 var(--rc-sp-7); }
.c-methods { display: flex; justify-content: center; gap: var(--rc-sp-7); margin-bottom: var(--rc-sp-6); flex-wrap: wrap; }
.cml {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
  margin-bottom: var(--rc-sp-1);
}
.rc-brand .cmv {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-body);
  color: var(--s-text);
  display: block;
  transition: color var(--rc-t-fast);
}
.rc-brand .cmv:hover { color: var(--rc-amber); }
.rc-brand .cmv:focus-visible { outline: none; box-shadow: var(--rc-focus); }
.cbtns { display: flex; gap: var(--rc-sp-3); justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------
   12 · RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  #hero { padding: calc(64px + var(--rc-sp-6)) var(--rc-sp-4) var(--rc-sp-7); }
  .hero-right { justify-content: flex-start; }
  .kit-base { padding: var(--rc-sp-5); }
  #dashboard, #sistema, #problemas, #numeros, #planes, #hardware, #contacto { padding: 72px 0; }
  .c-inner { padding: 0 var(--rc-sp-4); }
}
@media (max-width: 600px) {
  #hero { min-height: 0; }
  .hbtns .btn-main, .hbtns .btn-sec { width: 100%; }
  .mod-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .c-methods { flex-direction: column; gap: var(--rc-sp-5); }
  .cbtns { flex-direction: column; }
  .cbtns .btn-main, .cbtns .btn-sec { width: 100%; }
  .kit-base { padding: var(--rc-sp-4); }
  #dashboard, #sistema, #problemas, #numeros, #planes, #hardware, #contacto { padding: 56px 0; }
}

/* ------------------------------------------------------------
   13 · IMPRESIÓN
   ------------------------------------------------------------ */
@media print {
  .ticker-wrap, .app { display: none; }
  .dcard, .prob-card, .pcard, .ccard, .hcard, .kit-base { break-inside: avoid; }
}

/* ============================================================
   14 · MAQUETA DE LA APP
   Único bloque SIGNAL permitido dentro de una página BRAND:
   demo de producto embebida en material comercial.
   Lee tokens --rc-* directamente, no --s-*: es otra superficie.
   Calcada de la pantalla Panel de la app.
   ============================================================ */
.app {
  width: 100%;
  max-width: 380px;
  display: flex; flex-direction: column;
  background: var(--rc-bg);
  border: var(--rc-bw) solid var(--rc-line);
  border-radius: 28px;
  overflow: hidden;
}

/* --- Cabecera del local --- */
.app-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rc-sp-3);
  padding: var(--rc-sp-4);
  border-bottom: var(--rc-bw) solid var(--rc-line-soft);
}
.app-head__site { min-width: 0; }
.app-name {
  font-size: var(--rc-fs-body); font-weight: var(--rc-fw-semi);
  color: var(--rc-text); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-loc {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-live {
  flex: none;
  display: flex; align-items: center; gap: var(--rc-sp-2);
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-signal);
  white-space: nowrap;
}
.app-pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--rc-signal);
  box-shadow: 0 0 8px var(--rc-signal);
  animation: rc-breathe 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .app-pulse { animation: none; } }

/* --- Cuerpo --- */
.app-body {
  flex: 1;
  padding: var(--rc-sp-4);
  display: flex; flex-direction: column; gap: var(--rc-sp-5);
}
.app-block { display: flex; flex-direction: column; gap: var(--rc-sp-2); }
.app-block[hidden] { display: none; }
.app-eyebrow {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  text-transform: uppercase;
  color: var(--rc-text-4);
}

/* --- Rejilla de cifras: dos columnas, como en la app --- */
.app-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--rc-sp-2);
}
.app-stat {
  background: var(--rc-surface);
  border: var(--rc-bw) solid var(--rc-line);
  border-radius: var(--rc-r-lg);
  padding: var(--rc-sp-3);
  display: flex; flex-direction: column; gap: var(--rc-sp-2);
  min-width: 0;
}
/* El único halo de la maqueta, en lo que más importa */
.app-stat--glow { border-color: transparent; box-shadow: var(--rc-glow-signal); }
.app-stat__k {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  font-weight: var(--rc-fw-med);
  letter-spacing: var(--rc-ls-label);
  text-transform: uppercase;
  color: var(--rc-text-3);
}
.app-stat__v {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-hero);
  line-height: 1;
  color: var(--rc-text);
}
.app-stat__v--signal { color: var(--rc-signal); }
.app-stat__v--amber  { color: var(--rc-amber); }
.app-stat__n { font-size: var(--rc-fs-sm); color: var(--rc-text-2); }

/* --- Filtros: pastilla, el único sitio donde se permite --- */
.app-filters { display: flex; flex-wrap: wrap; gap: var(--rc-sp-2); }
.app-filter {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--rc-r-pill);
  padding: 6px 12px;
  border: var(--rc-bw) solid var(--rc-line);
  color: var(--rc-text-2);
  white-space: nowrap;
}
.app-filter--on { background: var(--rc-signal); border-color: transparent; color: var(--rc-bg); }

/* --- Filas: el mismo componente para máquina y para aviso --- */
.app-rows { display: flex; flex-direction: column; gap: var(--rc-sp-2); }
.app-row {
  display: flex; align-items: center; gap: var(--rc-sp-3);
  min-height: var(--rc-row-h);
  background: var(--rc-surface);
  border: var(--rc-bw) solid var(--rc-line);
  border-radius: var(--rc-r-lg);
  padding: var(--rc-sp-3);
  transition: border-color var(--rc-t-base);
}
.app-row__icon {
  width: 30px; height: 30px; flex: none;
  border-radius: var(--rc-r-md);
  background: var(--rc-surface-2);
  border: var(--rc-bw) solid var(--rc-line);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--rc-t-base), border-color var(--rc-t-base);
}
.app-row__icon--ok   { background: var(--rc-signal-bg); border-color: var(--rc-signal-line); }
.app-row__icon--warn { background: var(--rc-amber-bg);  border-color: var(--rc-amber-line); }
.app-row__icon--fail { background: var(--rc-alert-bg);  border-color: var(--rc-alert-line); }
.app-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-row__name {
  font-size: var(--rc-fs-sm); font-weight: var(--rc-fw-semi); color: var(--rc-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row__meta {
  font-family: var(--rc-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-micro); letter-spacing: .04em; color: var(--rc-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-row__meta--alert { color: var(--rc-alert); }
.app-row__right { flex: none; display: flex; align-items: center; gap: var(--rc-sp-2); }
/* Hueco que alterna entre chip de estado y boton Desbloquear */
.app-slot { display: inline-flex; align-items: center; }
.app-row__amount {
  font-family: var(--rc-font-data); font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-sm); color: var(--rc-amber);
}

.app-chip {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--rc-r-sm);
  padding: 4px 8px;
  border: var(--rc-bw) solid;
  white-space: nowrap;
}
.app-chip--ok   { color: var(--rc-signal); background: var(--rc-signal-bg); border-color: var(--rc-signal-line); }
.app-chip--warn { color: var(--rc-amber);  background: var(--rc-amber-bg);  border-color: var(--rc-amber-line); }
.app-chip--fail { color: var(--rc-alert);  background: var(--rc-alert-bg);  border-color: var(--rc-alert-line); }
.app-chip--off  { color: var(--rc-text-4); background: var(--rc-surface-2); border-color: var(--rc-line); }

/* Desbloquear: verde señal, ejecuta sobre la máquina */
.app-unlock {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rc-bg);
  background: var(--rc-signal);
  border-radius: var(--rc-r-md);
  padding: 0 12px; height: 32px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
}

/* Un cambio de estado se nota: parpadeo seco del borde, una vez */
@keyframes app-flash {
  0%   { border-color: var(--rc-signal); }
  100% { border-color: var(--rc-line); }
}
.app-row--changed { animation: app-flash 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .app-row--changed { animation: none; } }

/* --- Barra inferior: cinco destinos exactos --- */
.app-tabs {
  flex: none;
  height: var(--rc-nav-h);
  border-top: var(--rc-bw) solid var(--rc-line);
  display: flex; align-items: center;
}
.app-tab {
  flex: 1; min-width: 0;
  height: var(--rc-nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--rc-sp-1);
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rc-text-4);
}
.app-tab[data-current] { color: var(--rc-signal); }
.app-tab svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.app-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (max-width: 1100px) { .app { max-width: 100%; } }
@media (max-width: 380px) {
  .app { border-radius: var(--rc-r-lg); }
  .app-tab span { font-size: 9px; }
}

/* ============================================================
   15 · NAVEGACIÓN ENTRE PÁGINAS
   La web deja de ser un scroll único: cada área es una página
   y cada página termina llevando a la siguiente.
   ============================================================ */

/* --- Tarjetas de área de la portada --- */
#areas { padding: 96px 0; border-top: var(--rc-bw) solid var(--s-line); }
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--rc-sp-4);
  margin-top: var(--rc-sp-7);
}
.area-card {
  display: flex; flex-direction: column; gap: var(--rc-sp-3);
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  /* Hover seco: cambia el borde, no mueve ni escala */
  transition: border-color var(--rc-t-fast), background var(--rc-t-fast);
}
.area-card:hover { border-color: var(--rc-amber-line); background: var(--rc-brand-surface); }
.area-card:focus-visible { outline: none; box-shadow: var(--rc-focus); }
.area-num {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  color: var(--rc-amber);
}
.area-title {
  font-size: var(--rc-fs-lg);
  font-weight: var(--rc-fw-semi);
  color: var(--s-text);
  line-height: 1.2;
  text-wrap: balance;
}
.area-desc { font-size: var(--rc-fs-sm); line-height: var(--rc-lh-read); color: var(--rc-text-2); }
.area-list { display: flex; flex-direction: column; }
.area-item {
  font-size: var(--rc-fs-sm);
  color: var(--rc-text-2);
  padding: var(--rc-sp-2) 0;
  border-top: var(--rc-bw) solid var(--s-line);
  display: flex; align-items: center; gap: var(--rc-sp-2);
}
.area-item::before {
  content: ''; width: 4px; height: 4px; flex: none; background: var(--rc-amber-mid);
}
.area-go {
  margin-top: auto; padding-top: var(--rc-sp-3);
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rc-amber);
}
.area-card:hover .area-go { color: var(--rc-amber-hi); }

/* --- Capas y bloques de tres --- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--rc-sp-4);
  margin-top: var(--rc-sp-7);
}
.cap-card {
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-5);
  display: flex; flex-direction: column; gap: var(--rc-sp-3);
}
.cap-n {
  font-family: var(--rc-font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  color: var(--rc-amber);
}
.cap-t { font-size: var(--rc-fs-lg); font-weight: var(--rc-fw-semi); color: var(--s-text); margin: 0; }
.cap-d { font-size: var(--rc-fs-sm); line-height: var(--rc-lh-read); color: var(--rc-text-2); margin: 0; }

/* --- Pase a la página siguiente --- */
.nextup { padding: var(--rc-sp-8) 0; border-top: var(--rc-bw) solid var(--s-line); }
.next-card {
  display: flex; flex-direction: column; gap: var(--rc-sp-2);
  background: var(--s-surface);
  border: var(--rc-bw) solid var(--rc-amber-line);
  border-radius: var(--s-radius);
  padding: var(--rc-sp-6);
  transition: background var(--rc-t-fast), border-color var(--rc-t-fast);
}
.next-card:hover { background: var(--rc-brand-surface); border-color: var(--rc-amber); }
.next-card:focus-visible { outline: none; box-shadow: var(--rc-focus); }
.next-kicker {
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-micro);
  letter-spacing: var(--rc-ls-micro);
  text-transform: uppercase;
  color: var(--rc-text-4);
}
.next-title {
  font-size: var(--rc-fs-hero);
  font-weight: var(--rc-fw-semi);
  line-height: 1.15;
  color: var(--s-text);
  text-wrap: balance;
}
.next-desc { font-size: var(--rc-fs-body); line-height: var(--rc-lh-read); color: var(--rc-text-2); max-width: 60ch; }
.next-go {
  margin-top: var(--rc-sp-3);
  font-family: var(--rc-font-data);
  font-size: var(--rc-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rc-amber);
}

/* Secciones propias de las páginas interiores */
#areas, #capas, #principios, #posicionamiento,
#implantacion, #retorno, #que-incluye, #esencial {
  padding: 96px 0;
  border-top: var(--rc-bw) solid var(--s-line);
}
#capas, #que-incluye { border-top: none; }

@media (max-width: 1100px) {
  #areas, #capas, #principios, #posicionamiento,
  #implantacion, #retorno, #que-incluye, #esencial { padding: 72px 0; }
  .next-card { padding: var(--rc-sp-5); }
}
@media (max-width: 600px) {
  #areas, #capas, #principios, #posicionamiento,
  #implantacion, #retorno, #que-incluye, #esencial { padding: 56px 0; }
  .next-title { font-size: var(--rc-fs-data); }
}

/* ============================================================
   16 · PÁGINA DE ERROR
   Rojo de alerta: la página no existe, es un fallo real.
   ============================================================ */
.slabel.err { color: var(--rc-alert); }
.slabel.err::before { background: var(--rc-alert); }
.err-code {
  font-size: clamp(72px, 18vw, 180px);
  line-height: .9;
  color: var(--rc-alert);
  opacity: .42;
  margin-bottom: var(--rc-sp-3);
}
.err-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--rc-sp-2);
  margin-top: var(--rc-sp-6);
}
.ms-v.err-v { color: var(--rc-alert); }