@charset "UTF-8";

/* Vanza — landing page
   Paleta y familia tipografica identicas a las del producto (ver
   frontend/tailwind.config.js): "ink" es la escala neutra de la app. sello
   (navy) y credito (cian) vienen del logo de Vanza y son el color primario
   y secundario de marca -- se conservan los nombres de variable historicos
   (heredados de la epoca "sello fiscal / credito contable") porque el motivo
   visual de la pagina (tickets con borde perforado, un sello de goma,
   tarjetas con su "ruta" de modulo real) sigue siendo el comprobante fiscal,
   solo que ahora en los colores de Vanza en vez de rojo/verde. */

:root {
  --ink-50: #F4F6F8;
  --ink-100: #E8EBF0;
  --ink-200: #DBE0E7;
  --ink-300: #C1C8D3;
  --ink-400: #8A93A3;
  --ink-500: #5C6678;
  --ink-600: #414B5C;
  --ink-700: #2C3444;
  --ink-800: #1A2130;
  --ink-900: #10151F;
  --ink-950: #080B11;

  --sello: #003A5A;
  --sello-dark: #002740;
  --sello-tint: #E4EEF3;
  --credito: #087285;
  --credito-tint: #E1F5F8;

  --paper: #FFFFFF;
  --paper-warm: #FBF9F5;

  --font-display: 'IBM Plex Sans Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.1;
  margin: 0 0 0.5em;
}

a {
  color: inherit;
}

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sello);
  margin: 0 0 0.75rem;
}

/* ---------- Header ---------- */

.header {
  position: sticky;
  top: 0;
  background: rgba(0, 40, 62, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 10;
}

.header :focus-visible {
  outline-color: #6FD3E3;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.header__mark {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.header__word-group {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.header__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}

.header__word-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6FD3E3;
  margin-top: 0.2rem;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.header__nav a:not(.btn):not(.header__login) {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}

.header__nav a:not(.btn):not(.header__login):hover {
  color: #fff;
}

.header__login {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 0.45rem 0.95rem;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.header__login:hover {
  border-color: #fff;
  color: #fff;
}

.header__menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.btn--primary {
  background: var(--sello);
  color: #fff;
}

.btn--primary:hover {
  background: var(--sello-dark);
  box-shadow: 0 0 0 4px rgba(0, 246, 255, 0.16);
}

.btn--primary:active {
  transform: translateY(1px);
}

/* Sobre el navbar navy el boton navy se hunde -- version en cian con texto
   navy, unica excepcion al fill navy/texto blanco del resto del sitio. */
.header .btn--primary {
  background: #00E4EF;
  color: var(--sello-dark);
}

.header .btn--primary:hover {
  background: #6FE9F0;
  box-shadow: none;
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
}

.btn--lg {
  padding: 0.9rem 1.9rem;
  font-size: 1.05rem;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 6.5rem 0 5rem;
  background:
    radial-gradient(ellipse 700px 480px at 12% 0%, var(--credito-tint), transparent 60%),
    radial-gradient(ellipse 700px 480px at 88% 10%, var(--sello-tint), transparent 60%),
    var(--ink-50);
  text-align: center;
  overflow: hidden;
}

/* Papel rayado de libro contable, muy tenue -- textura, no ruido. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    var(--ink-200) 27px,
    var(--ink-200) 28px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 75%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 75%, transparent);
  opacity: 0.4;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .eyebrow,
.hero h1,
.hero__subtitle,
.hero__actions {
  animation: rise 0.7s var(--ease) both;
}

.hero h1 {
  animation-delay: 0.08s;
}

.hero__subtitle {
  animation-delay: 0.16s;
}

.hero__actions {
  animation-delay: 0.24s;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
  max-width: 800px;
  letter-spacing: -0.015em;
}

.hero__subtitle {
  max-width: 620px;
  margin: 0 auto 2.25rem;
  color: var(--ink-600);
  font-size: 1.15rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3.5rem;
}

.hero__link {
  text-decoration: none;
  font-weight: 500;
  color: var(--ink-600);
  border-bottom: 1px solid transparent;
}

.hero__link:hover {
  color: var(--ink-900);
  border-bottom-color: var(--ink-400);
}

/* Ticket: el motivo de "comprobante fiscal" que da identidad a la pagina.
   El borde punteado imita la perforacion de un ticket; el sello rotado es
   la unica animacion de entrada de toda la pagina (ver @keyframes stamp). */

.ticket {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-top: 3px dashed var(--ink-300);
  border-bottom: 3px dashed var(--ink-300);
  border-radius: 6px;
  padding: 1.75rem 2rem;
}

.ticket__stamp {
  position: absolute;
  top: -18px;
  right: -14px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--sello);
  background: var(--paper);
  border: 2px solid var(--sello);
  border-radius: 50%;
  padding: 0.65rem 0.7rem;
  transform: rotate(-9deg);
  box-shadow: 0 0 0 3px var(--paper);
  animation: stamp 0.6s 0.15s var(--ease) both;
}

.ticket__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-600);
}

.ticket__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ticket__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-900);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

.ticket__tag--red {
  background: var(--sello-tint);
  color: var(--sello-dark);
}

.ticket__tag--green {
  background: var(--credito-tint);
  color: var(--credito);
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: rotate(-9deg) scale(1.6);
  }
  70% {
    opacity: 1;
    transform: rotate(-9deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: rotate(-9deg) scale(1);
  }
}

/* ---------- Modulos ---------- */

.modulos, .diferenciadores, .demo {
  padding: 4.5rem 0;
}

.modulos h2, .diferenciadores h2, .demo h2 {
  font-size: 1.9rem;
  margin-bottom: 2.25rem;
  max-width: 620px;
}

.modulos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.card {
  position: relative;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--paper);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.card:hover {
  border-color: var(--ink-400);
  transform: translateY(-2px);
}

/* Numero de folio (como una linea de libro contable), solo en los modulos
   -- no se aplica a las tarjetas de /ayuda, que son otro contexto. */
.modulos__grid {
  counter-reset: modulo;
}

.modulos__grid .card {
  counter-increment: modulo;
  overflow: hidden;
  border-top: 3px solid transparent;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.modulos__grid .card:nth-child(odd) {
  border-top-color: var(--sello);
}

.modulos__grid .card:nth-child(even) {
  border-top-color: var(--credito);
}

.modulos__grid .card:hover {
  box-shadow: 0 16px 32px -20px rgba(16, 21, 31, 0.35);
}

.modulos__grid .card::after {
  content: counter(modulo, decimal-leading-zero);
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink-100);
  z-index: 0;
}

.modulos__grid .card > * {
  position: relative;
  z-index: 1;
}

.card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}

.card__tag--green {
  background: var(--credito-tint);
  color: var(--credito);
}

.card__tag--red {
  background: var(--sello-tint);
  color: var(--sello-dark);
}

.card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.4rem;
}

.card p {
  color: var(--ink-600);
  margin: 0;
  font-size: 0.93rem;
}

/* ---------- Diferenciadores ---------- */

.diferenciadores {
  background: var(--credito-tint);
}

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.ledger li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--ink-200);
}

.ledger li:first-child {
  border-top: 1px solid var(--ink-200);
}

.ledger__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--credito);
  color: #fff;
  font-size: 0.8rem;
  margin-top: 0.1rem;
}

.ledger strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.ledger p {
  margin: 0;
  color: var(--ink-600);
  font-size: 0.93rem;
}

/* ---------- Demo form ---------- */

.demo {
  background: var(--sello-tint);
}

.demo__inner {
  max-width: 680px;
}

.demo__intro {
  color: var(--ink-600);
  margin-bottom: 2rem;
}

.demo__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  padding: 2rem;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-top: 3px dashed var(--ink-300);
  border-bottom: 3px dashed var(--ink-300);
  border-radius: 6px;
}

.demo__form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
}

.demo__form label span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.demo__form input,
.demo__form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  color: var(--ink-900);
  background: var(--paper);
}

.demo__form input:focus,
.demo__form textarea:focus {
  border-color: var(--sello);
}

.demo__form-full {
  grid-column: 1 / -1;
}

.demo__status {
  min-height: 1.5em;
  font-weight: 500;
  margin-top: 1.25rem;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--ink-950);
  color: var(--ink-300);
  padding: 2rem 0;
  border-top: 3px solid;
  border-image: linear-gradient(90deg, var(--sello), #00E4EF) 1;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__mark {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.88rem;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Aparicion escalonada -- las tarjetas/filas de una misma grilla no entran
   todas a la vez. */
.modulos__grid .reveal:nth-child(1) { transition-delay: 0s; }
.modulos__grid .reveal:nth-child(2) { transition-delay: 0.05s; }
.modulos__grid .reveal:nth-child(3) { transition-delay: 0.1s; }
.modulos__grid .reveal:nth-child(4) { transition-delay: 0.15s; }
.modulos__grid .reveal:nth-child(5) { transition-delay: 0.2s; }
.modulos__grid .reveal:nth-child(6) { transition-delay: 0.25s; }
.modulos__grid .reveal:nth-child(7) { transition-delay: 0.3s; }
.modulos__grid .reveal:nth-child(8) { transition-delay: 0.35s; }

.ledger .reveal:nth-child(1) { transition-delay: 0s; }
.ledger .reveal:nth-child(2) { transition-delay: 0.08s; }
.ledger .reveal:nth-child(3) { transition-delay: 0.16s; }
.ledger .reveal:nth-child(4) { transition-delay: 0.24s; }

.empezar__grid .reveal:nth-child(1) { transition-delay: 0s; }
.empezar__grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.empezar__grid .reveal:nth-child(3) { transition-delay: 0.2s; }

.faq__list .reveal:nth-child(1) { transition-delay: 0s; }
.faq__list .reveal:nth-child(2) { transition-delay: 0.06s; }
.faq__list .reveal:nth-child(3) { transition-delay: 0.12s; }
.faq__list .reveal:nth-child(4) { transition-delay: 0.18s; }
.faq__list .reveal:nth-child(5) { transition-delay: 0.24s; }

.mockup.reveal {
  transform: translateY(24px) scale(0.98);
}

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

  .ticket__stamp {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card, .btn {
    transition: none;
  }
}

/* ---------- Trustbar ---------- */

.trustbar {
  background: var(--ink-900);
  color: var(--ink-100);
  padding: 0.9rem 0;
  border-top: 3px dashed var(--ink-600);
  border-bottom: 3px dashed var(--ink-600);
}

.trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
}

.trustbar__inner strong {
  color: #fff;
  font-weight: 600;
}

.trustbar__sep {
  color: var(--ink-500);
}

/* ---------- Producto (mockup) ---------- */

.producto {
  padding: 5rem 0;
  background: var(--paper-warm);
}

.producto__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3rem;
  align-items: center;
}

.producto__copy h2 {
  font-size: 1.9rem;
  margin-bottom: 1rem;
}

.producto__copy p {
  color: var(--ink-600);
  font-size: 0.98rem;
}

.mockup {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(16, 21, 31, 0.28);
  overflow: hidden;
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-200);
}

.mockup__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-300);
}

.mockup__url {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-500);
}

.mockup__body {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 260px;
}

.mockup__side {
  background: var(--ink-950);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mockup__side-item {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-400);
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.mockup__side-item--active {
  background: var(--sello);
  color: #fff;
}

.mockup__main {
  padding: 1.25rem;
}

.mockup__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.mockup__kpi {
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
}

.mockup__kpi-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-500);
  margin-bottom: 0.3rem;
}

.mockup__kpi-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-900);
}

.mockup__kpi-value--red {
  color: var(--sello);
}

.mockup__kpi-value--green {
  color: var(--credito);
}

.mockup__rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mockup__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mockup__row-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-500);
  width: 28px;
  flex: none;
}

.mockup__row-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--credito-tint);
  position: relative;
}

.mockup__row-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--credito);
  opacity: 0.55;
}

/* ---------- Cómo empezar ---------- */

.empezar {
  padding: 5rem 0;
  background: var(--ink-950);
  color: var(--ink-200);
}

.eyebrow--light {
  color: #6FD3E3;
}

.empezar h2 {
  color: #fff;
  font-size: 1.9rem;
  margin-bottom: 2.5rem;
  max-width: 480px;
}

.empezar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.empezar__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #6FD3E3;
  margin-bottom: 0.75rem;
}

.empezar__step h3 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.empezar__step p {
  color: var(--ink-400);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------- FAQ ---------- */

.faq {
  padding: 5rem 0;
  border-top: 3px dashed var(--ink-300);
}

.faq h2 {
  font-size: 1.9rem;
  margin-bottom: 2.25rem;
}

.faq__list {
  max-width: 760px;
}

.faq__item {
  border-bottom: 1px solid var(--ink-200);
  padding: 1.1rem 0;
}

.faq__item:first-child {
  border-top: 1px solid var(--ink-200);
}

.faq__item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--sello);
  flex: none;
  transition: transform 0.2s var(--ease);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item p {
  margin: 0.85rem 0 0;
  color: var(--ink-600);
  font-size: 0.93rem;
  max-width: 640px;
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .ticket__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .header__nav {
    display: none;
  }

  .header__menu-toggle {
    display: block;
  }

  .header__nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--sello-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 1.5rem;
    gap: 1.1rem;
  }

  .hero {
    padding: 3.5rem 0 3rem;
  }

  .ticket {
    padding: 1.5rem 1.25rem;
  }

  .ticket__stamp {
    top: -16px;
    right: 8px;
  }

  .demo__form {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .trustbar__inner {
    font-size: 0.72rem;
  }

  .producto__inner {
    grid-template-columns: 1fr;
  }

  .mockup__body {
    grid-template-columns: 1fr;
  }

  .mockup__side {
    flex-direction: row;
    overflow-x: auto;
  }

  .mockup__kpis {
    grid-template-columns: 1fr;
  }
}

/* ---------- Base de conocimiento (/ayuda) ---------- */

.ayuda-page {
  padding: 3rem 0 5rem;
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-500);
  margin: 0 0 1.5rem;
}

.breadcrumb a {
  color: var(--ink-500);
  text-decoration: underline;
}

.ayuda-intro {
  color: var(--ink-600);
  max-width: 620px;
  margin: 0 0 3rem;
}

.ayuda-categoria {
  margin-bottom: 3rem;
}

.ayuda-categoria h2 {
  font-size: 1.3rem;
  margin-bottom: 1.25rem;
}

.articulo {
  max-width: 720px;
}

.articulo h1 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.articulo p {
  color: var(--ink-700);
  margin: 0 0 1.25rem;
}

.articulo__pasos {
  color: var(--ink-700);
  padding-left: 1.25rem;
  margin: 0 0 1.5rem;
}

.articulo__pasos li {
  margin-bottom: 0.6rem;
}

.articulo__volver {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--sello);
  text-decoration: none;
}

.articulo__volver:hover {
  text-decoration: underline;
}