/* ============================================
   factux — landing page
   Compartiendo tokens con el manual de marca.
   ============================================ */

:root {
  --tinta:        #15161A;
  --tinta-2:      #2A2C34;
  --tinta-3:      #4A4D58;
  --carbon:       #6B6E7A;
  --niebla:       #A8AAB3;
  --linea:        #E4E4E7;
  --linea-dark:   #2A2C34;
  --papel-2:      #F4F4F5;
  --papel:        #FFFFFF;

  --cielo:        #1B36E8;
  --cielo-hover:  #1428C2;
  --nanduti:      #F26B3A;
  --lima:         #D9F25C;

  --aprobado:     #1A8754;
  --aprobado-bg:  #DDEFE0;
  --procesando:   #1B36E8;
  --procesando-bg:#DCE2FF;
  --pendiente:    #B8730D;
  --pendiente-bg: #F6E6C8;
  --rechazado:    #B81F1F;
  --rechazado-bg: #F3D6D2;

  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
  --serif:"Newsreader", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Compensa el .nav fixed (64px). Sin esto la primera sección quedaba
     oculta debajo del navbar transparente. */
  padding-top: 64px;
}
body.is-nav-modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--mono); }

/* ============================================
   shell + utilities
   ============================================ */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.shell.wide { max-width: 1440px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbon);
}

.section-head {
  margin-bottom: 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
.section-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carbon);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.section-head .meta .num {
  background: var(--tinta); color: var(--papel);
  padding: 2px 6px; border-radius: 3px;
}
.section-head h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  text-wrap: balance;
  max-width: 900px;
}
.section-head h2 .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.section-head h2 .accent { color: var(--cielo); }
.section-head .sub {
  font-size: 17px;
  color: var(--tinta-2);
  line-height: 1.5;
  max-width: 420px;
  margin-bottom: 8px;
}

/* ============================================
   wordmark + mark
   ============================================ */
.wm {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.05em;
}
.wm .x {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--cielo);
  letter-spacing: -0.08em;
}
.wm-dark .x { color: var(--lima); }

.mark {
  display: inline-grid;
  place-items: center;
  background: var(--cielo);
  color: var(--papel);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.08em;
  border-radius: 5px;
}

/* ============================================
   buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--linea);
  background: var(--papel);
  color: var(--tinta);
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 100%;
}
.btn:hover { border-color: var(--tinta); }
.btn.primary {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.btn.primary:hover { background: var(--tinta-2); }
.btn.cielo {
  background: var(--cielo);
  color: var(--papel);
  border-color: var(--cielo);
}
.btn.cielo:hover { background: var(--cielo-hover); border-color: var(--cielo-hover); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-2);
}
.btn.ghost:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--papel-2); }
.btn.lg {
  padding: 14px 22px;
  font-size: 15px;
  border-radius: 7px;
}
.btn.dark-ghost {
  background: transparent;
  color: var(--papel);
  border-color: var(--tinta-3);
}
.btn.dark-ghost:hover {
  border-color: var(--niebla);
  background: rgba(255,255,255,0.04);
}
.btn .ico { width: 14px; height: 14px; }
.btn .arrow { font-family: var(--mono); }

/* ============================================
   01 · NAV
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(228, 228, 231, 0.6);
}
.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
}
/* Forzar alineación vertical centrada en cada child directo del nav-inner
   — el <nav> default tiene baseline shift que descoloca al wordmark vs
   los botones del .nav-cta. align-self: center sobre cada child + display
   flex interno asegura que todos compartan el eje vertical del nav. */
.nav-inner > * { align-self: center; }
.nav-inner > nav { display: flex; align-items: center; height: 100%; }
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 3px 8px 3px 7px;
  background: var(--aprobado-bg);
  color: var(--aprobado);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.nav-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--aprobado);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.9); }
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 6px;
  justify-self: center;
}
.nav-links a {
  font-size: 14px;
  color: var(--tinta-2);
  padding: 6px 12px;
  border-radius: 5px;
  transition: all 0.15s ease;
}
.nav-links a:hover { color: var(--tinta); background: var(--papel-2); }
.nav-cta { display: flex; gap: 6px; align-items: center; }

/* ============================================
   02 · HERO
   ============================================ */
.hero {
  background: var(--tinta);
  color: var(--papel);
  padding: 140px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 30%, transparent 75%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--linea-dark);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--niebla);
  margin-bottom: 32px;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 0 3px rgba(217,242,92,0.18);
}
.hero-badge b { color: var(--papel); font-family: var(--sans); font-weight: 500; letter-spacing: -0.005em; }

.hero h1 {
  font-size: clamp(56px, 7vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 500;
  margin-bottom: 32px;
  text-wrap: balance;
}
.hero h1 .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--lima);
  letter-spacing: -0.025em;
}
.hero h1 .accent {
  color: var(--cielo);
}
.hero .sub {
  font-size: 20px;
  line-height: 1.45;
  color: var(--niebla);
  margin-bottom: 40px;
  max-width: 540px;
  text-wrap: pretty;
}
.hero .hero-cta {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.hero .trust {
  display: flex;
  gap: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--niebla);
  flex-wrap: wrap;
}
.hero .trust > div { display: flex; flex-direction: column; gap: 2px; }
.hero .trust b {
  color: var(--papel);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero .trust b .lima { color: var(--lima); font-family: var(--serif); font-style: italic; font-weight: 400; }

/* hero dashboard mock (dark) */
.hero-mock {
  background: #1B1D24;
  border: 1px solid var(--linea-dark);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transform-origin: center;
}
.mock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea-dark);
  background: #15161A;
}
.mock-top .crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--niebla);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mock-top .crumbs .m {
  width: 16px; height: 16px;
  background: var(--lima); color: var(--tinta);
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  line-height: 1;
}
.mock-top .crumbs b { color: var(--papel); font-family: var(--sans); letter-spacing: -0.01em; text-transform: none; font-weight: 500; font-size: 12px; }
.mock-top .chev { color: var(--carbon); }
.mock-top .actions { display: flex; gap: 6px; }
.mock-top .actions span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--niebla);
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.mock-top .actions span.cielo {
  background: var(--cielo);
  color: var(--papel);
}

.mock-bar {
  padding: 16px 18px 12px;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid var(--linea-dark);
}
.mock-bar h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--papel);
}
.mock-bar h3 small { color: var(--carbon); font-weight: 400; font-size: 12px; }
.mock-bar .filt {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--niebla);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex; gap: 6px;
}
.mock-bar .filt span { padding: 3px 7px; border: 1px solid var(--linea-dark); border-radius: 4px; }
.mock-bar .filt span.active { background: var(--papel); color: var(--tinta); border-color: var(--papel); }

.mock-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--linea-dark);
}
.mock-kpis > div {
  padding: 14px 18px;
  border-right: 1px solid var(--linea-dark);
}
.mock-kpis > div:last-child { border-right: none; }
.mock-kpis .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--carbon); text-transform: uppercase; }
.mock-kpis .v { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--papel); margin-top: 2px; line-height: 1.05; }
.mock-kpis .v .it { font-family: var(--serif); font-style: italic; color: var(--lima); font-weight: 400; font-size: 14px; }
.mock-kpis .d { font-family: var(--mono); font-size: 9px; color: var(--aprobado); margin-top: 2px; }

.mock-rows { padding: 4px 0; }
.mock-rows .r {
  display: grid;
  grid-template-columns: 90px 1fr 90px 90px;
  gap: 10px;
  padding: 10px 18px;
  font-size: 11px;
  align-items: center;
  border-bottom: 1px solid var(--linea-dark);
}
.mock-rows .r:last-child { border-bottom: none; }
.mock-rows .r .num { font-family: var(--mono); font-size: 10px; color: var(--niebla); }
.mock-rows .r .nm { color: var(--papel); font-weight: 500; letter-spacing: -0.005em; }
.mock-rows .r .nm small { display: block; color: var(--carbon); font-weight: 400; font-family: var(--mono); font-size: 9px; }
.mock-rows .r .amt { font-family: var(--mono); text-align: right; color: var(--papel); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 500;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-family: var(--sans);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.aprobado { background: rgba(26,135,84,0.18); color: #6FD79A; }
.pill.procesando { background: rgba(27,54,232,0.22); color: #8FA2FF; }
.pill.pendiente { background: rgba(184,115,13,0.18); color: #F5C977; }
.pill.rechazado { background: rgba(184,31,31,0.2); color: #F08C8C; }

/* light pills for elsewhere */
.pill-l { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 3px 9px 3px 7px; border-radius: 999px; }
.pill-l .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-l.aprobado { background: var(--aprobado-bg); color: var(--aprobado); }

/* ============================================
   03 · BADGES
   ============================================ */
.badges {
  padding: 56px 0;
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}
.badges-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 64px;
}
.badges-label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--carbon);
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}
.badges-label b { display: block; color: var(--tinta); font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; text-transform: none; margin-bottom: 2px; }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--tinta-2);
  background: var(--papel);
}
.chip .check {
  color: var(--aprobado);
  font-weight: 600;
}
.chip.dim { color: var(--carbon); background: var(--papel-2); border-color: var(--papel-2); }
.chip.cielo {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}
.chip.cielo .check { color: var(--lima); }

/* ============================================
   04 · FEATURES
   ============================================ */
.features {
  padding: 112px 0;
  background: var(--papel);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel);
}
.feat {
  padding: 36px 32px 32px;
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  min-height: 280px;
  background: var(--papel);
  transition: background 0.2s ease;
}
.feat:hover { background: var(--papel-2); }
.feat:nth-child(3n) { border-right: none; }
.feat:nth-last-child(-n+3) { border-bottom: none; }
.feat .ico {
  width: 36px; height: 36px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  display: grid; place-items: center;
  background: var(--papel);
  color: var(--tinta);
}
.feat .ico svg { width: 18px; height: 18px; }
.feat h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 8px;
}
.feat h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.feat p {
  font-size: 15px;
  color: var(--tinta-2);
  line-height: 1.5;
  text-wrap: pretty;
}
.feat .tag {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--carbon);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feat .tag b { color: var(--tinta); }

/* ============================================
   05 · CÓMO FUNCIONA
   ============================================ */
.how {
  padding: 112px 0;
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 28px; left: 5%; right: 5%;
  height: 1px;
  background: var(--linea);
  z-index: 0;
}
.step {
  position: relative;
  padding: 0 20px 0 0;
  z-index: 1;
}
.step:last-child { padding-right: 0; }
.step .num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--papel);
  border: 1px solid var(--linea);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  font-weight: 400;
  color: var(--cielo);
  margin-bottom: 24px;
  line-height: 1;
  position: relative;
  z-index: 2;
}
.step .num::after { display: none; }
.step:nth-child(1) .num { color: var(--cielo); }
.step:nth-child(2) .num { color: var(--nanduti); }
.step:nth-child(3) .num { color: var(--cielo); background: var(--tinta); border-color: var(--tinta); color: var(--lima); }
.step:nth-child(4) .num { color: var(--aprobado); }
.step h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
  margin-top: 14px;
}
.step h3 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.step p {
  font-size: 14px;
  color: var(--tinta-2);
  line-height: 1.5;
}
.step .data {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tinta-2);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.step .data b { color: var(--tinta); }
.step .data .cielo { color: var(--cielo); }
.step .data .aprobado { color: var(--aprobado); }

/* ============================================
   06 · CÓDIGO
   ============================================ */
.code {
  padding: 112px 0;
  background: var(--papel);
}
.code-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: center;
}
.code-grid .copy h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin-bottom: 20px;
  text-wrap: balance;
}
.code-grid .copy h2 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.code-grid .copy p {
  font-size: 17px;
  color: var(--tinta-2);
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 420px;
}
.code-grid .copy .checklist {
  list-style: none;
  display: grid;
  gap: 10px;
}
.code-grid .copy .checklist li {
  font-size: 14px;
  color: var(--tinta-2);
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}
.code-grid .copy .checklist li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  color: var(--cielo);
  font-weight: 500;
}
.code-grid .copy .checklist li b { color: var(--tinta); font-weight: 500; }

.terminal {
  background: var(--tinta);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--tinta-3);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.18);
}
.terminal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tinta-3);
  background: #0F1015;
}
.terminal-head .dots { display: flex; gap: 6px; }
.terminal-head .dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tinta-3);
}
.terminal-head .title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--niebla);
}
.terminal-head .title b { color: var(--papel); font-weight: 500; }
.terminal-body {
  padding: 28px 32px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--niebla);
  letter-spacing: 0.01em;
}
.terminal-body .ln { display: block; }
.terminal-body .req {
  display: inline-block;
  background: var(--cielo);
  color: var(--papel);
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-right: 6px;
}
.terminal-body .path { color: var(--papel); }
.terminal-body .key { color: #8FA2FF; }
.terminal-body .str { color: var(--lima); }
.terminal-body .num { color: var(--nanduti); }
.terminal-body .com { color: var(--carbon); }
.terminal-body .resp-arrow { color: var(--aprobado); }
.terminal-body .resp-ok {
  display: inline-block;
  background: rgba(26,135,84,0.2);
  color: #6FD79A;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-right: 6px;
}
.terminal-body .ind { padding-left: 16px; display: inline-block; }
.terminal-body hr {
  border: none;
  border-top: 1px dashed var(--tinta-3);
  margin: 16px 0;
}
.terminal-body .typing::after {
  content: "▌";
  color: var(--lima);
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================================
   07 · PLANES
   ============================================ */
.plans-section {
  padding: 112px 0;
  background: var(--papel-2);
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.plan.featured {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
  transform: scale(1.02);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.25);
}
.plan .p-flag {
  position: absolute;
  top: -10px; right: 24px;
  background: var(--lima); color: var(--tinta);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 500;
}
.plan .p-name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.plan .p-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--carbon);
}
.plan.featured .p-tag { color: var(--niebla); }
.plan .p-price {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}
.plan .p-price .it {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--cielo);
}
.plan.featured .p-price .it { color: var(--lima); }
.plan .p-price small {
  font-size: 14px;
  font-weight: 400;
  color: var(--carbon);
  letter-spacing: 0;
  margin-left: 4px;
}
.plan.featured .p-price small { color: var(--niebla); }
.plan .p-summary {
  font-size: 14px;
  color: var(--tinta-2);
  line-height: 1.5;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea);
}
.plan.featured .p-summary { color: var(--niebla); border-bottom-color: var(--tinta-3); }
.plan ul.p-list {
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  display: grid;
  gap: 8px;
  flex: 1;
}
.plan ul.p-list li {
  position: relative;
  padding-left: 22px;
  color: var(--tinta-2);
}
.plan.featured ul.p-list li { color: var(--niebla); }
.plan ul.p-list li b { color: var(--tinta); font-weight: 500; }
.plan.featured ul.p-list li b { color: var(--papel); }
.plan ul.p-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cielo);
  font-family: var(--mono);
  font-weight: 500;
}
.plan.featured ul.p-list li::before { color: var(--lima); }
.plan .p-cta { margin-top: auto; padding-top: 16px; }
.plan .p-cta .btn { width: 100%; justify-content: center; }

.plans-note {
  text-align: center;
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--carbon);
  letter-spacing: 0.04em;
}
.plans-note b { color: var(--tinta); font-family: var(--sans); font-weight: 500; letter-spacing: -0.005em; }

/* ============================================
   08 · CTA FINAL
   ============================================ */
.cta {
  background: var(--tinta);
  color: var(--papel);
  padding: 144px 0;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.5px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.cta h2 {
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-bottom: 28px;
  text-wrap: balance;
}
.cta h2 .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--lima);
  letter-spacing: -0.02em;
}
.cta .sub {
  font-size: 18px;
  color: var(--niebla);
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.cta .cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.cta .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--carbon);
  display: inline-flex;
  gap: 24px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  border: 1px solid var(--linea-dark);
}
.cta .meta span b { color: var(--papel); font-family: var(--sans); letter-spacing: -0.005em; font-weight: 500; }

/* ============================================
   09 · FOOTER
   ============================================ */
.footer {
  background: var(--tinta);
  color: var(--niebla);
  padding: 80px 0 40px;
  border-top: 1px solid var(--tinta-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
.footer-col--last { grid-column: -2 / -1; }
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-brand .wm {
  font-size: 32px;
  color: var(--papel);
  letter-spacing: -0.04em;
}
.footer-brand .tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--niebla);
  max-width: 280px;
  text-wrap: pretty;
}
.footer-brand .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(26,135,84,0.15);
  color: #6FD79A;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.footer-brand .status .dot { width: 6px; height: 6px; border-radius: 50%; background: #6FD79A; }

.footer-col h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbon);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col ul a {
  font-size: 14px;
  color: var(--niebla);
  transition: color 0.15s ease;
}
.footer-col ul a:hover { color: var(--papel); }
.footer-col ul a .ext {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--carbon);
  margin-left: 4px;
  letter-spacing: 0.04em;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--tinta-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--carbon);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom .made {
  display: flex; gap: 6px; align-items: center;
}
.footer-bottom .made .pin {
  background: var(--nanduti);
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* ============================================
   responsive
   ============================================ */
@media (max-width: 1100px) {
  .hero-grid, .code-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-mock { transform: none; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feat:nth-child(3n) { border-right: 1px solid var(--linea); }
  .feat:nth-child(2n) { border-right: none; }
  .feat:nth-last-child(-n+3) { border-bottom: 1px solid var(--linea); }
  .feat:nth-last-child(-n+2) { border-bottom: none; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .steps::before { display: none; }
  .plans-grid { grid-template-columns: 1fr; }
  .plan.featured { transform: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .badges-grid { grid-template-columns: 1fr; gap: 24px; }
}
/* ============================================
   Mobile — 350px ≤ ancho ≤ 700px.
   Reglas globales:
   - Todo full-width (paddings ajustados, sin max-width restrictivos).
   - section-head colapsa a 1 columna; el `.sub` ya no compite con el h2.
   - .steps: número izq / título der en la PRIMERA fila, descripción y
     .data abajo full-width (grid 2-col → 1-col en filas 2 y 3).
   - Footer en 2 columnas (mejor legibilidad que 1 sola columna larga).
   - Nav-links hidden; CTAs primarias visibles.
   ============================================ */
/* ---- Hamburger button: SOLO visible en mobile (≤700px). ---- */
.nav-hamburger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; width: 40px; height: 40px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; transition: background .15s; }
.nav-hamburger:hover { background: var(--papel-2); }
.nav-hamburger__line { display: block; width: 22px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-hamburger[aria-expanded="true"] .nav-hamburger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .nav-hamburger__line:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] .nav-hamburger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 700px) {
  .nav-hamburger { display: inline-flex; }
  .nav-cta { display: none; }

  /* Nav-links: MODAL full-screen en mobile. Cubre 100vw × 100vh con
     fondo opaco, ítems centrados grandes (lectura cómoda con dedo
     gordo), botón X en la esquina superior derecha, CTAs principales
     al pie. Body scroll-lock via .is-nav-modal-open. */
  .nav-links { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--papel); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 16px 28px 40px; z-index: 1000; overflow-y: auto; }
  .nav-links[data-nav-open="true"] { display: flex; }
  .nav-links li { width: 100%; list-style: none; }
  .nav-links li a { display: block; padding: 18px 16px; border-radius: 8px; font-size: 22px; font-weight: 500; color: var(--tinta); text-align: center; }
  .nav-links li a:hover { background: var(--papel-2); }

  .nav-links__close-row { display: flex; justify-content: flex-end; margin-bottom: 24px; }
  .nav-links__close { width: 44px; height: 44px; display: grid; place-items: center; background: var(--papel-2); border: 0; border-radius: 8px; color: var(--tinta); cursor: pointer; transition: background .15s; }
  .nav-links__close:hover { background: var(--linea); }
  .nav-links__close svg { width: 22px; height: 22px; }

  .nav-links__cta-row { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linea); }
  .nav-links__cta-row .btn { width: 100%; justify-content: center; padding: 14px 18px; font-size: 16px; }

  .nav-inner { position: relative; }
  .shell, .shell.wide { padding: 0 16px; }
  .hero { padding: 32px 0 48px; }
  .hero-grid { gap: 28px; }
  /* Mock dashboard: contiene el desborde con scroll-x interno; el contenedor
     padre nunca rompe el viewport. Mock-top wrappea breadcrumbs + actions. */
  .hero-mock-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
  .hero-mock { min-width: 320px; transform: none; }
  .mock-top { flex-wrap: wrap; gap: 8px; row-gap: 8px; }
  .mock-top .crumbs { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .mock-top .actions { flex-wrap: wrap; }
  /* KPIs: mantener 3 columnas en mobile (es lo que comunica el value
     prop "Emitidas / Aprobadas / Facturado"). Aligned-top así los
     valores y deltas no se centran verticalmente. */
  .mock-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: start; }
  .mock-kpis > div { font-size: 11px; }
  .mock-kpis > div .v { font-size: 16px; }

  /* Mock rows: layout card vertical — número arriba, nombre+RUC abajo,
     pill + monto en la última fila (pill izquierda, monto derecha).
     align-items: start para que ningún elemento se centre vertical. */
  .mock-rows { font-size: 11px; }
  .mock-rows .r { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "num num" "nm nm" "pill amt"; gap: 4px 8px; align-items: start; padding: 12px 14px; }
  .mock-rows .r .num { grid-area: num; }
  .mock-rows .r .nm { grid-area: nm; }
  .mock-rows .r .pill { grid-area: pill; justify-self: start; align-self: center; }
  .mock-rows .r .amt { grid-area: amt; justify-self: end; align-self: center; }
  .hero-copy h1 { font-size: clamp(32px, 8vw, 44px); }
  .hero-copy .sub { font-size: 15px; }
  .hero-badge { font-size: 11px; padding: 6px 10px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .trust { grid-template-columns: 1fr; gap: 14px; }

  .section-head { grid-template-columns: 1fr; gap: 16px; align-items: start; margin-bottom: 32px; }
  .section-head h2 { font-size: clamp(28px, 8vw, 40px); max-width: none; }
  .section-head .sub { max-width: none; margin-bottom: 0; font-size: 15px; }

  .badges-grid { grid-template-columns: 1fr; gap: 18px; }

  .features-grid { grid-template-columns: 1fr; }
  .feat { border-right: none !important; border-bottom: 1px solid var(--linea) !important; padding: 24px 16px; }
  .feat:last-child { border-bottom: none !important; }

  /* Steps: número círculo a la izquierda, h3 al lado, p + .data full-width abajo */
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps::before { display: none; }
  .step { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "num title" "body body" "data data"; gap: 12px 14px; padding: 0; }
  .step .num { grid-area: num; margin-bottom: 0; align-self: center; }
  .step h3 { grid-area: title; align-self: center; margin: 0; font-size: 19px; }
  .step p { grid-area: body; margin-top: 4px; font-size: 14px; }
  .step .data { grid-area: data; margin-top: 0; }

  .code-grid { gap: 24px; }
  .terminal { font-size: 11px; }
  .plans-grid { grid-template-columns: 1fr; gap: 18px; }
  .plan.featured { transform: none; }
  /* CTA final: en mobile la card oscura se separa de los bordes y del
     bottom del viewport. La section pierde su fondo full-bleed y lo
     mueve al .cta-inner que pasa a ser una card con border-radius. El
     `::before` con el dot pattern también se reposiciona en el inner. */
  .cta { background: transparent; padding: 32px 16px 48px; }
  .cta::before { display: none; }
  .cta-inner { background: var(--tinta); color: var(--papel); border-radius: 20px; padding: 48px 24px; overflow: hidden; }
  .cta-inner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.5px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); pointer-events: none; }
  .cta-inner > * { position: relative; z-index: 1; }
  .cta h2 { font-size: clamp(28px, 8vw, 40px); }
  .cta-row { flex-direction: column; gap: 10px; }
  .cta-row .btn { width: 100%; justify-content: center; }

  .footer { padding: 40px 0 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 380px) {
  .shell, .shell.wide { padding: 0 12px; }
  .hero-copy h1 { font-size: 30px; }
  .section-head h2 { font-size: 26px; }
  .step { grid-template-columns: 48px 1fr; }
  .step .num { width: 48px; height: 48px; font-size: 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-brand { grid-column: auto; }
}

/* ============================================
   Hero slider — stage + dots + slides 2/3
   3 vistas auto-rotando: dashboard (existente) · KuDE · circuito SIFEN.
   ============================================ */
.hero-mock-wrap { position: relative; }
.hero-mock-stage { position: relative; }
.hero-mock-stage > .hero-mock { transition: opacity .5s ease; }
.hero-mock-stage > .hero-mock[aria-hidden="true"] { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero-mock-stage > .hero-mock[aria-hidden="false"] { position: relative; opacity: 1; }

.hero-mock-dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.hero-mock-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--linea); cursor: pointer; transition: background .15s, transform .15s, width .2s; }
.hero-mock-dot:hover { background: var(--carbon); }
.hero-mock-dot.is-active { background: var(--cielo); width: 24px; border-radius: 999px; }

/* ============================================
   Slide 2 — KuDE / factura electrónica con QR
   Papel crema sobre el frame oscuro, tipografía sans+mono.
   ============================================ */
.hero-mock--kude { background: var(--papel); border: 1px solid var(--linea); padding: 0; }
.kude-paper { background: var(--papel-2); padding: 28px 28px 24px; color: var(--tinta); font-family: var(--sans); font-size: 12.5px; }
.kude-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.kude-brand { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -0.025em; line-height: 1; color: var(--tinta); }
.kude-brand span { color: var(--cielo); }
.kude-meta { font-size: 12px; color: var(--tinta-2); margin-top: 4px; }
.kude-meta-2 { font-size: 11.5px; color: var(--carbon); margin-top: 2px; }
.kude-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--cielo); color: var(--papel); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; }
.kude-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lima); }

.kude-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.kude-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--carbon); margin-bottom: 4px; }
.kude-value { font-family: var(--mono); font-size: 13px; color: var(--tinta); font-weight: 500; }

.kude-section { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.kude-client { font-size: 14px; line-height: 1.4; }
.kude-client b { color: var(--tinta); font-weight: 600; }
.kude-client small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--carbon); margin-top: 2px; }

.kude-items { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 14px 0; }
.kude-items thead th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--carbon); padding: 6px 4px; border-bottom: 1px solid var(--linea); font-weight: 500; }
.kude-items thead th.r { text-align: right; }
.kude-items tbody td { padding: 8px 4px; color: var(--tinta-2); border-bottom: 1px dashed var(--linea); }
.kude-items tbody td.r { text-align: right; font-family: var(--mono); color: var(--tinta); }

/* .kude-foot — reglas reales más abajo, en el bloque "total a la derecha". */
.kude-qr { width: 88px; height: 88px; background: var(--papel); border: 1px solid var(--linea); padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2px; }
.kude-qr span { background: var(--tinta); border-radius: 1px; }
.kude-qr span:nth-child(2), .kude-qr span:nth-child(7), .kude-qr span:nth-child(10), .kude-qr span:nth-child(13) { background: transparent; }
.kude-totals { display: flex; flex-direction: column; gap: 8px; }
.kude-cdc { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-2); letter-spacing: 0.02em; }
.kude-total { display: flex; flex-direction: column; }
.kude-amount { font-family: var(--sans); font-size: 22px; font-weight: 600; color: var(--tinta); letter-spacing: -0.02em; line-height: 1; }
.kude-stamp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; background: rgba(26,135,84,0.12); color: var(--aprobado); border-radius: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; align-self: flex-start; }
.kude-stamp .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aprobado); animation: pulse 2s ease-in-out infinite; }

/* ============================================
   Slide 3 — Circuito de emisión SIFEN
   4 nodos en cadena, fondo oscuro, líneas animadas.
   ============================================ */
.hero-mock--circuit { background: var(--tinta); padding: 32px 24px; }
.circuit { color: var(--papel); }
.circuit-title { text-align: center; font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--niebla); margin-bottom: 28px; }
.circuit-title .it { font-family: var(--serif); font-style: italic; color: var(--lima); font-weight: 400; }

.circuit-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 24px; }
.circuit-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.circuit-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--tinta-2); border: 1px solid var(--tinta-3); color: var(--niebla); }
.circuit-icon svg { width: 26px; height: 26px; }
.circuit-icon[data-color="cielo"] { background: var(--cielo); border-color: var(--cielo); color: var(--papel); }
.circuit-icon[data-color="lima"] { background: rgba(217, 242, 92, 0.16); border-color: var(--lima); color: var(--lima); }
.circuit-icon[data-color="nanduti"] { background: rgba(242, 107, 58, 0.18); border-color: var(--nanduti); color: var(--nanduti); }
.circuit-icon[data-color="ink"] { background: var(--tinta-2); color: var(--niebla); }
.circuit-x { font-family: var(--serif); font-style: italic; font-size: 36px; font-weight: 400; line-height: 1; color: var(--lima); }
.circuit-label { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--papel); }
.circuit-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--carbon); text-transform: uppercase; max-width: 110px; line-height: 1.4; }

.circuit-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; }
.circuit-arrow__line { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--tinta-3) 20%, var(--tinta-3) 80%, transparent); position: relative; }
.circuit-arrow__line::after { content: "→"; position: absolute; right: -8px; top: 50%; transform: translateY(-58%); color: var(--carbon); font-size: 14px; }
.circuit-arrow__pill { font-family: var(--mono); font-size: 9.5px; padding: 3px 7px; background: var(--tinta-2); border: 1px solid var(--tinta-3); border-radius: 4px; color: var(--niebla); letter-spacing: 0.02em; }
.circuit-arrow__time { font-family: var(--mono); font-size: 9px; color: var(--lima); letter-spacing: 0.05em; }

.circuit-totals { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--tinta-3); font-family: var(--mono); font-size: 10.5px; color: var(--niebla); letter-spacing: 0.04em; }
.circuit-totals b { color: var(--lima); font-family: var(--sans); font-weight: 500; letter-spacing: -0.005em; }

/* ============================================
   Mobile — slider stack vertical / circuit collapse
   ============================================ */
@media (max-width: 700px) {
  .hero-mock--kude .kude-paper { padding: 20px 18px 18px; font-size: 11.5px; }
  .hero-mock--kude .kude-brand { font-size: 18px; }
  .hero-mock--kude .kude-grid { grid-template-columns: 1fr 1fr; }
  /* .kude-foot mobile — manejado por el bloque más abajo (grid-template-areas). */
  .hero-mock--kude .kude-qr { width: 72px; height: 72px; }
  .hero-mock--kude .kude-amount { font-size: 18px; }

  .hero-mock--circuit { padding: 24px 14px; }
  .circuit-flow { grid-template-columns: 1fr; gap: 4px; }
  .circuit-arrow { flex-direction: row; width: 100%; min-width: 0; justify-content: center; gap: 8px; padding: 6px 0; }
  .circuit-arrow__line { width: 40px; height: 1px; }
  .circuit-arrow__line::after { content: "↓"; right: 50%; transform: translate(50%, -2px); }
  .circuit-totals { flex-direction: column; gap: 8px; }
}

/* ============================================
   KuDE — total a la derecha emulando factura impresa.
   Override del .kude-foot que ahora es flex 3-col (QR · CDC+stamp · Total).
   ============================================ */
/* Flex en lugar de grid: el .kude-foot__total queda anclado a la
   derecha vía `margin-left: auto`, alineado verticalmente con el QR
   (align-items: center) — emulando el footer de una factura impresa. */
.kude-foot { display: flex; align-items: center; gap: 18px; padding-top: 16px; }
.kude-foot > .kude-qr { flex: none; }
.kude-foot__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kude-foot__total { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-left: 24px; border-left: 1px solid var(--linea); }
.kude-foot__total .kude-label { margin-bottom: 6px; }
.kude-foot__total .kude-amount { font-family: var(--sans); font-size: 28px; font-weight: 700; color: var(--cielo); letter-spacing: -0.025em; line-height: 1; }
.kude-cdc { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-2); }
.kude-cdc .kude-label { margin-right: 6px; display: inline; }

/* ============================================
   Circuito — animaciones de los arrows y nodos.
   - travel:    dot que recorre la línea (left → right en desktop,
                top → bottom en mobile vía rotación de la animación).
   - pulse-glow: cada ícono palpita en secuencia (delays escalonados)
                para sugerir que el dato fluye nodo por nodo.
   - line-flow: la línea se rellena gradient con shift continuo.
   ============================================ */
@keyframes circuit-travel { 0% { left: -6px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes circuit-line-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 200% 50%; } }
@keyframes circuit-node-pulse { 0%, 60%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; } 30% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(217, 242, 92, 0.15); } }

.circuit-arrow__line { background: linear-gradient(90deg, transparent 0%, var(--tinta-3) 30%, var(--cielo) 50%, var(--tinta-3) 70%, transparent 100%); background-size: 200% 100%; animation: circuit-line-flow 3s ease-in-out infinite; position: relative; }
.circuit-arrow__line::before { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 8px var(--lima); transform: translateY(-50%); animation: circuit-travel 3s linear infinite; }
.circuit-arrow:nth-of-type(1) .circuit-arrow__line::before { animation-delay: 0s; }
.circuit-arrow:nth-of-type(2) .circuit-arrow__line::before { animation-delay: 1s; }
.circuit-arrow:nth-of-type(3) .circuit-arrow__line::before { animation-delay: 2s; }

.circuit-icon { transition: transform .25s; }
.circuit-node:nth-of-type(1) .circuit-icon { animation: circuit-node-pulse 9s ease-in-out infinite; animation-delay: 0s; }
.circuit-node:nth-of-type(2) .circuit-icon { animation: circuit-node-pulse 9s ease-in-out infinite; animation-delay: 1s; }
.circuit-node:nth-of-type(3) .circuit-icon { animation: circuit-node-pulse 9s ease-in-out infinite; animation-delay: 2s; }
.circuit-node:nth-of-type(4) .circuit-icon { animation: circuit-node-pulse 9s ease-in-out infinite; animation-delay: 3s; }

@media (prefers-reduced-motion: reduce) {
  .circuit-arrow__line, .circuit-arrow__line::before, .circuit-icon { animation: none !important; }
}

/* Mobile — el flex del .kude-foot wrappea, QR + mid en row 1,
   total en row 2 full-width vía flex-basis: 100%. */
@media (max-width: 700px) {
  .kude-foot { flex-wrap: wrap; gap: 14px; }
  .kude-foot__total { flex-basis: 100%; margin-left: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--linea); flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  .kude-foot__total .kude-label { margin-bottom: 0; }
  .kude-foot__total .kude-amount { font-size: 24px; }
}

/* ============================================
   Slide 1 — Dashboard live animations
   - Procesando dot palpita (es realtime).
   - El "+ NUEVA FACTURA" action tiene un sweep highlight.
   - Una row periódicamente flashea con bg suave (simula doc entrante).
   - KPI delta tiene un sutil pulse cada 8s.
   ============================================ */
@keyframes mock-row-flash { 0%, 95%, 100% { background: transparent; } 5% { background: rgba(217, 242, 92, 0.18); } 25% { background: transparent; } }
@keyframes mock-action-sweep { 0%, 70%, 100% { box-shadow: none; } 80% { box-shadow: 0 0 0 3px rgba(27, 54, 232, 0.18); } }
@keyframes mock-delta-blink { 0%, 60%, 100% { opacity: 1; } 30% { opacity: 0.45; } }
@keyframes mock-pulse-soft { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } }

.hero-mock--dashboard .pill.procesando .dot { animation: mock-pulse-soft 1.6s ease-in-out infinite; }
.hero-mock--dashboard .pill.pendiente .dot { animation: mock-pulse-soft 1.6s ease-in-out infinite; animation-delay: 0.8s; }
.hero-mock--dashboard .mock-rows .r:nth-child(2) { animation: mock-row-flash 7s ease-in-out infinite; animation-delay: 1.5s; }
.hero-mock--dashboard .mock-top .actions span.cielo { animation: mock-action-sweep 6s ease-in-out infinite; border-radius: 4px; }
.hero-mock--dashboard .mock-kpis > div:first-child .d { animation: mock-delta-blink 8s ease-in-out infinite; }

/* ============================================
   Slide 2 — KuDE live animations
   - Stamp "Aprobado por SIFEN" dot ya palpita (de antes).
   - El badge FACTURA ELECTRÓNICA tiene un sweep cada 6s.
   - El total muestra un shimmer suave (light pass).
   ============================================ */
@keyframes kude-shimmer { 0%, 100% { background-position: -120% 50%; } 50% { background-position: 220% 50%; } }
@keyframes kude-badge-shine { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(217, 242, 92, 0); } 80% { box-shadow: 0 0 0 4px rgba(217, 242, 92, 0.22); } }

.hero-mock--kude .kude-badge { animation: kude-badge-shine 6s ease-in-out infinite; }
.hero-mock--kude .kude-foot__total .kude-amount { background: linear-gradient(90deg, var(--cielo) 0%, var(--cielo) 35%, #4A66FF 50%, var(--cielo) 65%, var(--cielo) 100%); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: kude-shimmer 5s ease-in-out infinite; }

/* Stagger reveal del KuDE — cada sección aparece con un fade-up consecutivo
   cuando el slide 2 se vuelve activo. El JS del slider toggla `.is-reveal`
   sobre `.kude-paper` para forzar el restart del keyframe cada vez que la
   vista entra (sin el toggle, el navegador no re-dispara la animación). */
@keyframes kude-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.hero-mock--kude .kude-paper.is-reveal .kude-head, .hero-mock--kude .kude-paper.is-reveal .kude-grid > *, .hero-mock--kude .kude-paper.is-reveal .kude-section, .hero-mock--kude .kude-paper.is-reveal .kude-items thead, .hero-mock--kude .kude-paper.is-reveal .kude-items tbody tr, .hero-mock--kude .kude-paper.is-reveal .kude-foot { animation: kude-fade-up 0.5s cubic-bezier(.22,.61,.36,1) both; }
.hero-mock--kude .kude-paper.is-reveal .kude-head { animation-delay: 0.05s; }
.hero-mock--kude .kude-paper.is-reveal .kude-grid > *:nth-child(1) { animation-delay: 0.18s; }
.hero-mock--kude .kude-paper.is-reveal .kude-grid > *:nth-child(2) { animation-delay: 0.26s; }
.hero-mock--kude .kude-paper.is-reveal .kude-grid > *:nth-child(3) { animation-delay: 0.34s; }
.hero-mock--kude .kude-paper.is-reveal .kude-section { animation-delay: 0.46s; }
.hero-mock--kude .kude-paper.is-reveal .kude-items thead { animation-delay: 0.58s; }
.hero-mock--kude .kude-paper.is-reveal .kude-items tbody tr:nth-child(1) { animation-delay: 0.68s; }
.hero-mock--kude .kude-paper.is-reveal .kude-items tbody tr:nth-child(2) { animation-delay: 0.78s; }
.hero-mock--kude .kude-paper.is-reveal .kude-foot { animation-delay: 0.92s; }

@media (prefers-reduced-motion: reduce) {
  .hero-mock--dashboard .pill .dot, .hero-mock--dashboard .mock-rows .r, .hero-mock--dashboard .mock-top .actions span.cielo, .hero-mock--dashboard .mock-kpis > div:first-child .d, .hero-mock--kude .kude-badge, .hero-mock--kude .kude-foot__total .kude-amount { animation: none !important; }
  .hero-mock--kude .kude-foot__total .kude-amount { color: var(--cielo); -webkit-text-fill-color: var(--cielo); }
  .hero-mock--kude .kude-paper.is-reveal .kude-head, .hero-mock--kude .kude-paper.is-reveal .kude-grid > *, .hero-mock--kude .kude-paper.is-reveal .kude-section, .hero-mock--kude .kude-paper.is-reveal .kude-items thead, .hero-mock--kude .kude-paper.is-reveal .kude-items tbody tr, .hero-mock--kude .kude-paper.is-reveal .kude-foot { animation: none !important; opacity: 1; transform: none; }
}

/* ============================================
   Mobile ≤500px — refinements para asegurar que cabe sin recortes.
   ============================================ */
@media (max-width: 500px) {
  .hero-mock--kude .kude-paper { padding: 16px 14px 14px; font-size: 11px; }
  .hero-mock--kude .kude-head { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
  .hero-mock--kude .kude-brand { font-size: 16px; }
  .hero-mock--kude .kude-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-mock--kude .kude-items thead th, .hero-mock--kude .kude-items tbody td { padding: 6px 3px; font-size: 11px; }
  .hero-mock--kude .kude-foot__total .kude-amount { font-size: 22px; }
  .hero-mock--dashboard .mock-top { padding: 10px 12px; font-size: 9.5px; }
  .hero-mock--dashboard .mock-kpis > div { font-size: 10px; }
  .hero-mock--dashboard .mock-kpis > div .v { font-size: 14px; }
}

/* ============================================
   Nav modal — ítems exclusivos del modal mobile.
   En desktop la `.nav-links__close-row` y `.nav-links__cta-row` se
   ocultan; los CTAs en desktop viven en `.nav-cta` (afuera del modal).
   ============================================ */
.nav-links__close-row, .nav-links__cta-row { display: none; }
@media (max-width: 700px) {
  .nav-links__close-row { display: flex; justify-content: flex-end; margin-bottom: 24px; }
  .nav-links__cta-row { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linea); }
}