/* Ocote — sitio
   Los tokens son los del MODO OSCURO de la app de escritorio
   (desktop/src/index.css, bloque .dark). Mismo formato HSL sin envolver, para
   poder copiarlos de un lado al otro sin traducir.

   El sitio queda hermanado con el modo oscuro del producto, no con ninguna
   referencia externa: el fondo casi-negro y el indigo violaceo del acento ya
   existian en la aplicacion. */

:root {
  --background:         222 47% 8%;
  --card:               222 47% 10%;
  --elevado:            222 40% 13%;
  --foreground:         210 40% 96%;

  --primary:            245 58% 62%;
  --primary-foreground: 0 0% 100%;

  --secondary:          217 33% 17%;
  --muted:              217 33% 17%;
  --muted-foreground:   215 20% 55%;

  --border:             217 33% 18%;
  --page-bg:            222 47% 7%;
  --hondo:              222 47% 5%;

  --success:            142 71% 42%;
  --warning:            38 92% 48%;

  --radius: 0.5rem;

  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  --ancho: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: hsl(var(--background)); }
/* La barra de arriba es fija: sin esto el destino de un ancla queda debajo de
   ella y parece que el enlace no llevo a ninguna parte. */
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Peso moderado en los titulares grandes: la jerarquia la da el tamano,
   no el grosor. */
h1, h2 { margin: 0; font-weight: 560; letter-spacing: -0.03em; line-height: 1.1; }
h3, h4 { margin: 0; font-weight: 620; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.env { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }

/* ---------- barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: hsl(var(--background) / .78);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid hsl(var(--border));
}
.barra .env { display: flex; align-items: center; gap: 38px; height: 66px; }

.marca { display: flex; align-items: center; flex: none; }
.marca img { height: 34px; width: auto; display: block; }

.menu { display: flex; gap: 30px; margin-left: 8px; }
.menu a { font-size: 15px; color: hsl(var(--muted-foreground)); font-weight: 500; }
.menu a:hover { color: hsl(var(--foreground)); }

.barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.p-producto        .menu a[href="/producto"],
.p-soluciones      .menu a[href="/soluciones"],
.p-desarrolladores .menu a[href="/desarrolladores"],
.p-recursos        .menu a[href="/recursos"],
.p-precios         .menu a[href="/precios"],
.p-contacto        .menu a[href="/contacto"] {
  color: hsl(var(--foreground)); font-weight: 620;
}

/* Ilustracion dentro de una tarjeta */
.tarjeta-img {
  width: 100%; height: 104px; object-fit: contain; object-position: left center;
  display: block; margin-bottom: 22px;
}

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }
/* Un solo color saturado en toda la pagina, y esta reservado para la accion
   principal. Todo lo demas son blancos a distintas opacidades. */
.btn-primario { background: hsl(var(--primary)); color: #fff; }
.btn-primario:hover { background: hsl(245 58% 67%); }
.btn-linea {
  border-color: hsl(0 0% 100% / .22); color: hsl(var(--foreground));
  background: hsl(0 0% 100% / .04);
}
.btn-linea:hover { border-color: hsl(0 0% 100% / .42); background: hsl(0 0% 100% / .08); }
.btn-sm { padding: 9px 17px; font-size: 14px; }

.centrado { display: flex; justify-content: center; margin-top: 52px; }
.btn-grande {
  min-width: 320px; padding: 18px 44px; font-size: 16.5px;
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 12px 34px -12px hsl(var(--primary) / .7);
}
.btn-grande:hover { box-shadow: 0 18px 42px -12px hsl(var(--primary) / .8); transform: translateY(-1px); }
.btn-grande:active { transform: translateY(0); }
.btn-grande svg { width: 17px; height: 17px; stroke: currentColor; transition: transform .18s ease; }
.btn-grande:hover svg { transform: translateX(4px); }

/* ---------- secciones ---------- */
section { padding: 110px 0; }

/* .pagina alternaba a 0.979 de contraste — invisible. Sube a un panel que se
   distingue de verdad, y los filetes lo delimitan aunque el relleno sea sutil. */
.pagina {
  background: hsl(223 42% 12%);
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}

/* El segundo golpe visual de la pagina: despues del heroe no volvia a pasar
   nada hasta el pie. Se reserva para el diferenciador real. */
.destacado {
  position: relative;
  background:
    radial-gradient(64% 58% at 50% 0%, hsl(var(--primary) / .17), transparent 72%),
    radial-gradient(40% 44% at 88% 92%, hsl(300 70% 50% / .10), transparent 70%),
    hsl(224 46% 9%);
  border-top: 1px solid hsl(var(--primary) / .28);
  border-bottom: 1px solid hsl(var(--primary) / .28);
}

/* Encabezado de seccion centrado: es lo que separa el tono comercial del
   tono de manual tecnico. */
.etiqueta {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  /* Mas claro que --primary: a 11.5px el indigo base queda en 4.09:1 sobre el
     fondo y no alcanza el minimo de 4.5 para texto pequeno. */
  color: hsl(245 58% 74%); margin-bottom: 18px; text-align: center;
}
.titulo-seccion {
  font-size: clamp(31px, 4.1vw, 47px); max-width: 21ch;
  margin-inline: auto; text-align: center;
}
.bajada {
  margin: 20px auto 0; font-size: 19px; color: hsl(var(--muted-foreground));
  max-width: 62ch; text-align: center;
}

/* ---------- heroe ---------- */
/* La nebulosa vive dentro del heroe y no se escapa de su alto. */
.heroe { padding: 96px 0 78px; position: relative; overflow: hidden; }

/* Velo sobre la nebulosa, solo en la portada: mas oscuro a la izquierda, que
   es donde va el titular, y apagandose contra el borde inferior para que no
   corte en seco con la franja de capacidades. */
.heroe .nebula-fondo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg,
      hsl(var(--background) / .92) 0%,
      hsl(var(--background) / .70) 38%,
      hsl(var(--background) / .28) 68%,
      hsl(var(--background) / .12) 100%),
    linear-gradient(180deg,
      hsl(var(--background) / .35) 0%,
      transparent 26%,
      transparent 68%,
      hsl(var(--background)) 100%);
}
.heroe-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: 62px; align-items: center; }

.punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.heroe h1 { font-size: clamp(43px, 5.5vw, 70px); letter-spacing: -0.04em; font-weight: 540; }
.heroe h1 em { font-style: normal; color: hsl(245 58% 74%); }
.heroe-sub { margin-top: 26px; font-size: 20px; color: hsl(var(--muted-foreground)); max-width: 46ch; }
.heroe-btns { margin-top: 38px; display: flex; gap: 13px; flex-wrap: wrap; }
.heroe-pie { margin-top: 26px; font-size: 14.5px; color: hsl(var(--muted-foreground)); }

/* ---------- maquetas de producto ---------- */
/* El halo indigo despega la interfaz del fondo. Va como box-shadow y no como
   pseudo-elemento para no depender de contextos de apilamiento. */
.maqueta, .marco {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.75);
  overflow: hidden;
  box-shadow:
    0 0 90px -18px hsl(var(--primary) / .42),
    0 34px 62px -28px hsl(var(--hondo) / .9);
}

.maqueta { font-size: 13px; }
.maq-barra, .marco-barra {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: hsl(var(--hondo)); border-bottom: 1px solid hsl(var(--border)); font-size: 12px;
}
.maq-luz, .marco-luz { width: 9px; height: 9px; border-radius: 50%; background: hsl(var(--border)); }
.marco-ruta { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.maq-estado { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: hsl(var(--success)); font-weight: 600; }
.maq-cuerpo, .marco-cuerpo { padding: 18px; }
.maq-buscador {
  background: hsl(var(--hondo)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  padding: 11px 14px; color: hsl(var(--muted-foreground)); margin-bottom: 14px;
}
table.maq { width: 100%; border-collapse: collapse; }
table.maq th {
  text-align: left; font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); font-weight: 600; padding-bottom: 9px;
  border-bottom: 1px solid hsl(var(--border));
}
table.maq td { padding: 11px 0; border-bottom: 1px solid hsl(var(--border) / .55); }
table.maq td:last-child, table.maq th:last-child { text-align: right; }
.maq-cod { display: block; font-family: var(--mono); font-size: 10.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.maq-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid hsl(var(--border));
}
.maq-total b { font-size: 27px; letter-spacing: -0.03em; }
.maq-total small { color: hsl(var(--muted-foreground)); }
.maq-cobrar { background: hsl(var(--primary)); color: #fff; padding: 11px 22px; border-radius: var(--radius); font-weight: 650; }
.maq-teclas { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 15px; }
.tecla {
  font-family: var(--mono); font-size: 10.5px; color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); padding: 4px 8px;
}
.marco img { display: block; width: 100%; height: auto; }

/* ---------- franja de capacidades ---------- */
.franja { border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--page-bg)); }
.franja .env { display: grid; grid-template-columns: repeat(4, 1fr); }
.dato { padding: 44px 26px; border-right: 1px solid hsl(var(--border)); }
.dato:first-child { padding-left: 0; }
.dato:last-child { border-right: 0; }
.dato b { display: block; font-size: 25px; font-weight: 580; letter-spacing: -0.03em; line-height: 1.2; }
.dato span { display: block; margin-top: 9px; font-size: 14.5px; color: hsl(var(--muted-foreground)); }

/* ---------- tarjetas ---------- */
.rejilla { display: grid; gap: 22px; margin-top: 56px; }
.r3 { grid-template-columns: repeat(3, 1fr); }
.r2 { grid-template-columns: repeat(2, 1fr); }

/* Sobre .pagina la tarjeta con --card queda mas oscura que su propio fondo, asi
   que se hunde en vez de levantarse y desaparece. Se le sube el tono para que
   conserve el mismo relieve que tiene sobre el fondo normal. */
.pagina .tarjeta { background: hsl(223 42% 15%); }

.tarjeta {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5); padding: 32px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover {
  border-color: hsl(var(--primary) / .5); transform: translateY(-2px);
  box-shadow: 0 16px 40px -20px hsl(var(--primary) / .5);
}
.tarjeta h3 { font-size: 20px; margin-bottom: 12px; }
.tarjeta p { color: hsl(var(--muted-foreground)); font-size: 15.5px; }
.tarjeta.enlazada { display: block; }
.tarjeta.enlazada .mas { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 620; color: hsl(245 58% 74%); }

.icono {
  width: 42px; height: 42px; border-radius: calc(var(--radius) + 2px);
  background: hsl(var(--primary) / .16); border: 1px solid hsl(var(--primary) / .26);
  display: grid; place-items: center; margin-bottom: 20px;
}
.icono svg { width: 21px; height: 21px; stroke: hsl(245 58% 76%); }

/* ---------- encabezado de paginas interiores ---------- */
/* ---------- fondo de las cabeceras ----------
   Lo pone @flodlc/nebula, nada mas. El CSS solo da la caja: sin degradados,
   sin mallas y sin haces propios — dos animaciones encimadas se pelean. */
.cabecera {
  position: relative; overflow: hidden;
  /* La nebulosa necesita aire para leerse como fondo y no como franja, pero a
     620px el titular quedaba flotando en el vacio. A 470 el bloque de texto
     ocupa su cabecera. Padding simetrico: con align-items:center cualquier
     asimetria corre el bloque y deja mas aire de un lado. */
  padding: 84px 0; min-height: 470px;
  display: flex; align-items: center;
  border-bottom: 1px solid hsl(var(--border)); text-align: center;
}
.cabecera > .env { width: 100%; }

.cabecera .nebula-fondo,
.heroe .nebula-fondo {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.cabecera .nebula-fondo > *,
.heroe .nebula-fondo > * { position: absolute; inset: 0; }
.cabecera .nebula-fondo canvas,
.heroe .nebula-fondo canvas { display: block; width: 100% !important; height: 100% !important; }

/* el contenido va por encima del canvas */
.cabecera .env, .heroe .env { position: relative; z-index: 1; }
/* Sin ilustracion en las cabeceras: con la nebulosa de fondo compiten. Las
   ilustraciones siguen en uso en los pasos de migracion, la 404 y las tarjetas
   de desarrolladores, donde el fondo es plano. */
/* Mas cerca del titular de la portada: a 58px la cabecera interior se veia
   timida al lado del heroe. La bajada se estrecha para que titulo y texto
   formen un bloque, no dos lineas sueltas. */
.cabecera h1 { font-size: clamp(40px, 5.1vw, 64px); letter-spacing: -0.038em; }
.cabecera .bajada { font-size: 19.5px; max-width: 54ch; margin-top: 22px; }

.indice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; justify-content: center; }
/* Sobre la nebulosa, un fondo al 3% desaparece. Fondo casi opaco mas desenfoque
   detras: la pildora se lee y ademas deja ver que hay algo moviendose atras. */
.indice a {
  font-size: 14.5px; font-weight: 580; padding: 10px 19px;
  border: 1px solid hsl(0 0% 100% / .16); border-radius: 999px;
  color: hsl(var(--foreground));
  background: hsl(222 47% 11% / .78);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.indice a:hover {
  border-color: hsl(var(--primary) / .7);
  color: #fff;
  background: hsl(245 58% 40% / .82);
}

/* ---------- vistas del producto ---------- */
.vista {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 66px; align-items: center;
  padding: 70px 0; border-top: 1px solid hsl(var(--border));
}
.vista:first-of-type { border-top: 0; padding-top: 20px; }
.vista.invertida .vista-txt { order: 2; }
.vista-num { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: hsl(245 58% 74%); margin-bottom: 14px; }
.vista h3 { font-size: clamp(24px, 2.7vw, 32px); font-weight: 570; }
.vista p { margin-top: 16px; color: hsl(var(--muted-foreground)); font-size: 17px; }
.vista ul { margin: 20px 0 0; padding: 0; list-style: none; }
.vista li { position: relative; padding-left: 26px; margin-bottom: 9px; color: hsl(var(--muted-foreground)); font-size: 15.5px; }
.vista li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 14px; height: 8px;
  border-left: 2px solid hsl(var(--primary)); border-bottom: 2px solid hsl(var(--primary));
  transform: rotate(-45deg);
}

/* tarjetas de indicador */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 18px; }
.kpi { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 13px 14px; background: hsl(var(--elevado)); }
.kpi small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 640; }
.kpi b { display: block; font-size: 21px; letter-spacing: -0.03em; margin-top: 5px; }
.kpi i { font-style: normal; font-size: 11.5px; color: hsl(var(--success)); }

.grafico { display: flex; align-items: flex-end; gap: 12px; height: 132px; padding: 0 4px; border-bottom: 1px solid hsl(var(--border)); }
.col { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 100%; }
.col span { flex: 1; border-radius: 3px 3px 0 0; }
.b-ventas { background: hsl(var(--primary)); }
.b-compras { background: hsl(var(--primary) / .3); }
.meses { display: flex; gap: 12px; margin-top: 9px; padding: 0 4px; font-size: 10.5px; color: hsl(var(--muted-foreground)); }
.meses span { flex: 1; text-align: center; }
.leyenda { display: flex; gap: 18px; margin-bottom: 14px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.leyenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* ---------- bandeja ---------- */
.bandeja { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 1.5); overflow: hidden; }
.bandeja-cab {
  display: flex; align-items: center; gap: 11px; padding: 15px 20px;
  border-bottom: 1px solid hsl(var(--border)); font-size: 14px; font-weight: 600;
}
.bandeja-cab small { margin-left: auto; color: hsl(var(--muted-foreground)); font-weight: 500; }
.fila { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid hsl(var(--border) / .6); }
.fila:last-child { border-bottom: 0; }
.fila-txt { flex: 1; min-width: 0; }
.fila-txt b { display: block; font-size: 14.5px; font-weight: 600; }
.fila-txt span { font-family: var(--mono); font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.sello { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.s-ok  { background: hsl(var(--success) / .16); color: hsl(142 71% 62%); }
.s-mal { background: hsl(var(--warning) / .16); color: hsl(38 92% 64%); }

/* filas de definicion */
.def { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; }
.def div { border-bottom: 1px solid hsl(var(--border) / .6); padding-bottom: 9px; }
.def small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 640; }
.def b { font-size: 15.5px; }
.cuadre {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--radius);
  background: hsl(var(--success) / .13); color: hsl(142 71% 66%);
  border: 1px solid hsl(var(--success) / .22);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 640;
}

/* ---------- inventario de modulos ----------
   El resumen de todo lo que trae el sistema. Denso a proposito: se recorre con
   la vista en unos segundos y responde "¿esto incluye X?" sin abrir otra pagina. */
.modulos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 56px; }
.modulo h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: hsl(245 58% 74%); padding-bottom: 13px; margin-bottom: 15px;
  border-bottom: 1px solid hsl(var(--border));
}
.modulo ul { list-style: none; margin: 0; padding: 0; }
.modulo li {
  font-size: 15px; color: hsl(var(--muted-foreground));
  padding: 5px 0 5px 17px; position: relative;
}
.modulo li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--primary) / .55);
}

/* ---------- planes ---------- */
.planes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }

/* En precios las tarjetas suben y muerden la cabecera. Lo primero que se ve al
   entrar es el precio, y de paso el heroe deja de ser una franja vacia: la
   cabecera se acorta y el aire que sobraba lo ocupan las tarjetas. */
.p-precios .cabecera { min-height: 0; padding: 78px 0 158px; }
.p-precios .cabecera + section { padding-top: 0; }
.p-precios .planes { margin-top: -116px; position: relative; z-index: 2; }
.plan {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.75); padding: 40px 36px;
  display: flex; flex-direction: column;
}
.plan.destacado-plan {
  border-color: hsl(var(--primary) / .5);
  box-shadow: 0 18px 46px -24px hsl(var(--primary) / .55);
}
.plan-nombre { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: hsl(245 58% 74%); }
.plan-precio { display: flex; align-items: baseline; gap: 9px; margin: 20px 0 6px; }
.plan-precio b { font-size: 58px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.plan-precio span { font-size: 17px; color: hsl(var(--muted-foreground)); }
.plan-iva { font-size: 14px; color: hsl(142 71% 62%); font-weight: 600; }
.plan-tope {
  margin-top: 22px; padding: 13px 16px; border-radius: var(--radius);
  background: hsl(var(--primary) / .12); border: 1px solid hsl(var(--primary) / .26);
  font-size: 15px; font-weight: 600;
}
.plan ul { list-style: none; margin: 24px 0 0; padding: 0; flex: 1; }
.plan li { position: relative; padding-left: 27px; margin-bottom: 11px; font-size: 15.5px; color: hsl(var(--muted-foreground)); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 13px; height: 7px;
  border-left: 2px solid hsl(var(--primary)); border-bottom: 2px solid hsl(var(--primary));
  transform: rotate(-45deg);
}
.plan .btn { margin-top: 30px; width: 100%; }

/* El pago unico de habilitacion. Va bajo las tarjetas, en tono apagado: no es un
   argumento de venta, pero en una pagina que se titula "sin letra chica" tampoco
   puede estar escondido. El detalle completo esta en las preguntas. */
.nota-inicial {
  margin-top: 26px; text-align: center;
  font-size: 14.5px; line-height: 1.6;
  color: hsl(var(--muted-foreground));
  max-width: 62ch; margin-inline: auto;
}
.nota-inicial b { color: hsl(var(--foreground)); font-weight: 620; }

.anual {
  margin-top: 30px; text-align: center; padding: 26px 30px;
  border: 1px solid hsl(var(--success) / .32); border-radius: calc(var(--radius) * 1.5);
  background: hsl(var(--success) / .09);
}
.anual b { color: hsl(142 71% 66%); }
.anual-cifras { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; margin-top: 16px; font-size: 15px; color: hsl(var(--muted-foreground)); }
.anual-cifras s { color: hsl(var(--muted-foreground) / .7); }
/* La baja y la no devolucion van aqui, donde se decide pagar el ano: es el
   momento en que la regla importa. Tono apagado, pero legible. */
.anual-nota {
  margin: 18px auto 0; max-width: 68ch;
  font-size: 13.5px; line-height: 1.65; color: hsl(215 20% 72%);
}

/* ---------- pestañas ----------
   Se descarto la tabla comparativa: sugeria que la API hace inventario, caja y
   cotizaciones, y no los hace. Son productos distintos, cada uno con su lista. */
.pestanas {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 44px;
}
.pestana {
  font-family: inherit; font-size: 16px; font-weight: 620; cursor: pointer;
  padding: 14px 30px; border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: hsl(var(--muted-foreground));
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.pestana:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .5); }
.pestana.activa {
  background: hsl(var(--primary)); border-color: hsl(var(--primary));
  color: #fff;
  box-shadow: 0 10px 26px -12px hsl(var(--primary) / .7);
}

.panel { margin-top: 46px; }
/* Sin JavaScript los dos paneles quedan visibles: mejor de mas que de menos. */
.js .panel.oculto { display: none; }
.panel-nota {
  max-width: 68ch; margin: 0 auto 34px; text-align: center;
  font-size: 16px; color: hsl(var(--muted-foreground));
}
/* ---------- grupos plegables ----------
   Quince grupos abiertos a la vez son sesenta vinetas de golpe: el visitante no
   las lee, se abruma. Plegados, la seccion se recorre como un indice y el
   detalle queda a un clic. <details> nativo, funciona sin JavaScript. */
.plegables { display: block; max-width: 860px; margin: 46px auto 0; }
.plegables .modulo { border-bottom: 1px solid hsl(var(--border)); }
.plegables .modulo summary {
  cursor: pointer; list-style: none; padding: 19px 2px;
  display: flex; align-items: center; gap: 14px;
  font-size: 17.5px; font-weight: 600; letter-spacing: -0.012em;
  transition: color .14s ease;
}
.plegables .modulo summary:hover { color: hsl(245 58% 80%); }
.plegables .modulo summary::-webkit-details-marker { display: none; }
.plegables .modulo summary::after {
  content: "+"; margin-left: auto; color: hsl(245 58% 74%);
  font-size: 25px; font-weight: 300; line-height: 1;
}
.plegables .modulo[open] summary::after { content: "−"; }
.plegables .modulo ul { padding: 0 0 24px; columns: 2; column-gap: 36px; }
.plegables .modulo li { break-inside: avoid; }

.modulos-3 { grid-template-columns: repeat(3, 1fr); }
.modulos-4 { grid-template-columns: repeat(4, 1fr); }
.modulo code {
  display: block; font-family: var(--mono); font-size: 12px;
  color: hsl(245 58% 74%); margin-top: 3px;
}

/* ---------- resumen de planes en la portada ----------
   Mismo tratamiento que .tarjeta en el resto del sitio: fondo --card sobre el
   fondo normal de seccion. El intento anterior las ponia sobre .destacado, y
   ahi el contraste caia a 1.024 — la tarjeta existia pero no se veia. */
.planes-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 48px; }
.plan-mini {
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) * 1.5); padding: 32px 34px; text-align: left;
}
.plan-mini.marcado {
  border-color: hsl(var(--primary) / .5);
  box-shadow: 0 16px 40px -24px hsl(var(--primary) / .5);
}
.plan-mini .plan-nombre { font-size: 12px; }
.plan-mini .plan-precio { margin: 15px 0 0; }
.plan-mini .plan-precio b { font-size: 44px; }
.plan-mini .plan-tope { margin-top: 18px; font-size: 14.5px; }
.plan-mini ul { list-style: none; margin: 22px 0 0; padding: 0; }
.plan-mini li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 15px; color: hsl(var(--muted-foreground));
}
.plan-mini li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 6px;
  border-left: 2px solid hsl(var(--primary)); border-bottom: 2px solid hsl(var(--primary));
  transform: rotate(-45deg);
}

/* ---------- tira de dispositivos ---------- */
.dispositivos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-top: 46px; padding-top: 38px; border-top: 1px solid hsl(var(--border));
}
.dispo { display: flex; align-items: flex-start; gap: 15px; }
.dispo .icono { margin-bottom: 0; flex: none; }
.dispo b { display: block; font-size: 16px; font-weight: 640; margin-bottom: 4px; }
.dispo span { font-size: 14.5px; color: hsl(var(--muted-foreground)); }

/* ---------- banda del diferenciador ---------- */
.banda {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center;
}
.banda h2 { font-size: clamp(28px, 3.3vw, 40px); text-align: left; margin: 0; max-width: 18ch; }
.banda .etiqueta { text-align: left; }
.banda p { margin-top: 18px; color: hsl(var(--muted-foreground)); font-size: 17.5px; text-align: left; max-width: none; }
.banda .btn { margin-top: 28px; }

/* ---------- pasos ----------
   Cuatro columnas sueltas no se leen como un proceso. El icono y el numero van
   en la misma linea, y una guia los encadena para que se vea la secuencia. */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; }
.paso { position: relative; }

.paso-cab { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.paso .icono { margin-bottom: 0; flex: none; }
.paso-n {
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  color: hsl(245 58% 74%); letter-spacing: .04em; flex: none;
}
/* La guia es un elemento mas de la fila y crece hasta el borde: asi arranca
   donde termina el numero y no hace falta taparla con ningun fondo — que era
   lo que dejaba un recuadro de otro color encima de la linea. */
.paso-guia {
  flex: 1; height: 1px; min-width: 12px; margin-right: -30px;
  background: linear-gradient(90deg, hsl(var(--primary) / .42), hsl(var(--primary) / .06));
}
.paso:last-child .paso-guia { display: none; }

.paso h4 { font-size: 17.5px; margin-bottom: 10px; }
.paso p { font-size: 15px; color: hsl(var(--muted-foreground)); }

/* ---------- preguntas ---------- */
.pregunta { border-bottom: 1px solid hsl(var(--border)); }
.pregunta summary {
  cursor: pointer; list-style: none; padding: 25px 0;
  font-size: 18.5px; font-weight: 600; display: flex; align-items: center; gap: 16px;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: "+"; margin-left: auto; color: hsl(245 58% 74%); font-size: 25px; font-weight: 300; }
.pregunta[open] summary::after { content: "−"; }
.pregunta p { padding: 0 0 25px; color: hsl(var(--muted-foreground)); max-width: 72ch; }

/* ---------- cierre ---------- */
/* Cerraba flojo: titulo y boton sobre fondo plano despues de toda la pagina.
   Ahora es un panel con halo propio, para que el final pese como el principio. */
.cierre { text-align: center; position: relative; overflow: hidden; padding: 132px 0; }
.cierre::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 78% at 50% 108%, hsl(var(--primary) / .30), transparent 70%);
}
.cierre .env { position: relative; z-index: 1; }
.cierre h2 { font-size: clamp(35px, 4.8vw, 56px); margin: 0 auto; max-width: 17ch; }

/* El isotipo cierra la pagina con la marca, no con una ilustracion prestada. */
.cierre-marca { width: 54px; height: auto; display: block; margin: 0 auto 26px; opacity: .9; }

/* Pastillas con icono para los canales de contacto */
.indice-iconos { margin-top: 40px; }
.indice-iconos a { display: inline-flex; align-items: center; gap: 9px; }
.indice-iconos svg { width: 17px; height: 17px; stroke: hsl(245 58% 78%); flex: none; }
.indice-iconos a:hover svg { stroke: #fff; }
.cierre-btns { margin-top: 40px; display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* El icono de los pasos se define arriba, junto a .paso-cab. Aca quedaba una
   regla vieja con margin-bottom que, por venir despues, ganaba y descentraba
   el icono 9px respecto del numero. */

/* ---------- estado vacio ---------- */
/* Como se veria dentro del producto: la ilustracion no decora, ocupa el hueco
   donde todavia no hay datos y dice que hacer. */
.vacio { text-align: center; padding: 46px 26px; }
.vacio img { width: min(210px, 60%); height: auto; display: block; margin: 0 auto 26px; }
.vacio h4 { font-size: 18px; margin-bottom: 9px; }
.vacio p { font-size: 15px; color: hsl(var(--muted-foreground)); max-width: 42ch; margin: 0 auto 22px; }

/* ---------- pagina no encontrada ---------- */
/* ---------- 404 ----------
   La unica pagina donde la nebulosa puede ocupar todo y no le compite a nada:
   no hay producto que explicar, solo que el visitante se rie y vuelve. Aqui la
   libreria va con el sistema solar encendido y mas cometas. */
.espacio {
  position: relative; overflow: hidden; text-align: center;
  min-height: calc(100vh - 67px);
  display: flex; align-items: center;
  padding: 72px 0 88px;
}
.espacio .nebula-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.espacio .nebula-fondo > * { position: absolute; inset: 0; }
.espacio .nebula-fondo canvas { display: block; width: 100% !important; height: 100% !important; }
.espacio > .env { position: relative; z-index: 1; width: 100%; }

.espacio h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.035em; }
.espacio .bajada { max-width: 50ch; }
.espacio-nota {
  margin-top: 52px; font-size: 13.5px; letter-spacing: .02em;
  color: hsl(var(--muted-foreground));
}
.espacio .indice { margin-top: 16px; }

.astronauta { width: min(212px, 46vw); height: auto; display: block; margin: 0 auto 30px; }
/* Va a la deriva: sube y baja mientras cabecea. El cable se mece aparte y con
   otro compas, para que no parezca una sola pieza rigida. */
.astronauta-cuerpo { animation: deriva 7s ease-in-out infinite; transform-origin: 125px 130px; }
.astronauta-cable  { animation: cabo 9s ease-in-out infinite;   transform-origin: 168px 168px; }
@keyframes deriva {
  0%, 100% { transform: translateY(-7px) rotate(-3.5deg); }
  50%      { transform: translateY(7px)  rotate(3.5deg); }
}
@keyframes cabo {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* ---------- pie ---------- */
.pie { background: hsl(var(--hondo)); color: hsl(var(--muted-foreground)); padding: 72px 0 34px; font-size: 14.5px; border-top: 1px solid hsl(var(--border)); }
.pie-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 44px; }
.pie h5 { color: hsl(var(--foreground)); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 17px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a:hover { color: hsl(var(--foreground)); }
.pie-marca { margin-bottom: 18px; }
.pie-marca img { height: 40px; width: auto; display: block; }
.pie-base { margin-top: 52px; padding-top: 26px; border-top: 1px solid hsl(var(--border)); display: flex; justify-content: space-between; font-size: 13px; }

/* ══════════ ANIMACIONES ══════════
   Solo se animan transform y opacity: son las dos propiedades que el navegador
   compone en la GPU, sin recalcular el diseño. */

/* --- 1. La contingencia, demostrada ---
   Doce segundos en bucle: Hacienda responde, deja de responder, la venta se
   cobra igual y queda en cola, el servicio vuelve y el documento se transmite.
   Es el titular de la pagina funcionando solo. */
.estado-mh, .sello-mh { display: inline-grid; }
.estado-mh > *, .sello-mh > * { grid-area: 1 / 1; }

/* Pildora con fondo, no texto suelto: el cambio de estado tiene que verse de
   reojo, desde el otro lado de la pantalla. */
.estado-mh span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.e-linea {
  color: hsl(142 71% 66%); background: hsl(var(--success) / .16);
  border: 1px solid hsl(var(--success) / .34);
  animation: mh-linea 8s infinite;
}
.e-caido {
  color: hsl(38 92% 66%); background: hsl(var(--warning) / .18);
  border: 1px solid hsl(var(--warning) / .42);
  animation: mh-caido 8s infinite;
}

@keyframes mh-linea {
  0%, 30%   { opacity: 1; }
  34%, 66%  { opacity: 0; }
  70%, 100% { opacity: 1; }
}
@keyframes mh-caido {
  0%, 30%   { opacity: 0; }
  34%, 66%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* Velo ambar sobre toda la maqueta mientras Hacienda no responde. Va dentro
   del marco porque .maqueta recorta el desbordamiento, y solo anima opacity. */
.capa-caida {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, hsl(38 92% 48% / .16), hsl(38 92% 48% / 0) 42%);
  box-shadow: inset 0 2px 0 0 hsl(var(--warning));
  opacity: 0; animation: velo-caida 8s infinite;
}
@keyframes velo-caida {
  0%, 30%   { opacity: 0; }
  36%, 64%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

.sello-mh span {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.m-cola {
  background: hsl(var(--warning) / .2); color: hsl(38 92% 66%);
  border: 1px solid hsl(var(--warning) / .45);
  animation: sello-cola 8s infinite;
}
.m-ok {
  background: hsl(var(--success) / .2); color: hsl(142 71% 66%);
  border: 1px solid hsl(var(--success) / .45);
  animation: sello-ok 8s infinite;
}
@keyframes sello-cola {
  0%, 32%   { opacity: 0; transform: translateY(6px) scale(.94); }
  38%, 66%  { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: none; }
}
@keyframes sello-ok {
  0%, 68%   { opacity: 0; transform: translateY(6px) scale(.94); }
  74%, 94%  { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}

/* --- 2. Aparicion al entrar en pantalla ---
   El estado inicial se aplica solo si hay JavaScript: sin el, .js nunca se
   agrega al <html> y el contenido se ve siempre. */
.js .revelar { opacity: 0; transform: translateY(14px); }
.js .revelar.visible {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}

/* --- 3. El punto de estado latiendo --- */
.bandeja-cab .punto { animation: latido 2.4s ease-in-out infinite; }
/* En el POS late solo el punto del estado activo, y mas rapido cuando el
   servicio no responde: el ritmo tambien comunica. */
.e-linea .punto { animation: latido 2.4s ease-in-out infinite; }
.e-caido .punto { animation: latido 0.9s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* --- 4. El halo responde al puntero --- */
.maqueta, .marco { transition: box-shadow .4s ease, transform .4s ease; }
.maqueta:hover, .marco:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 120px -14px hsl(var(--primary) / .58),
    0 40px 70px -28px hsl(var(--hondo) / .95);
}

/* --- Quien prefiere menos movimiento, no lo tiene ---
   Las animaciones quedan congeladas en su primer fotograma, que es el estado
   correcto: Hacienda en linea y sin sello pendiente. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .revelar { opacity: 1 !important; transform: none !important; }
  .maqueta:hover, .marco:hover { transform: none; }
}

/* ---------- adaptable ---------- */
@media (max-width: 980px) {
  .heroe-grid, .r3, .r2, .pasos, .pie-grid { grid-template-columns: 1fr; }
  .franja .env { grid-template-columns: repeat(2, 1fr); }
  .dato { border-right: 0; border-bottom: 1px solid hsl(var(--border)); padding-left: 0; }
  .menu { display: none; }
  section { padding: 76px 0; }
  .vista { grid-template-columns: 1fr; gap: 32px; padding: 46px 0; }
  .vista.invertida .vista-txt { order: 0; }
  .kpis { grid-template-columns: 1fr; }
  .modulos { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .dispositivos { grid-template-columns: 1fr; gap: 20px; }
  .planes, .planes-mini { grid-template-columns: 1fr; }
  .p-precios .cabecera { padding: 62px 0 116px; }
  .p-precios .planes { margin-top: -84px; }
  .banda { grid-template-columns: 1fr; gap: 34px; }
  .banda h2, .banda p, .banda .etiqueta { text-align: center; margin-inline: auto; }
}

@media (max-width: 620px) {
  .modulos { grid-template-columns: 1fr; }
  .plegables .modulo ul { columns: 1; }
}

@media (max-width: 620px) {
  .barra-acciones .btn-linea { display: none; }
  .barra .env { gap: 14px; padding: 0 18px; }
  .env { padding: 0 18px; }
  .btn-sm { padding: 9px 14px; font-size: 13.5px; }
  .btn-grande { min-width: 0; width: 100%; }
  .marca { font-size: 19px; }
  .marca span { display: none; }
  .tarjeta { padding: 25px; }
}