/* ──────────────────────────────────────────────────────────────────────
   88tina — capa de marca sobre la plantilla Hyperspace (HTML5 UP).

   CÓMO ESTÁ ARMADO ESTO

   Hyperspace viene en morado (#5e42a6) y rosa (#b74e91) — dos colores que
   la guía de marca de 88tina prohíbe explícitamente. En vez de pisarlos a
   golpe de !important, se sustituyeron los hexes DENTRO de main.css por
   var(--c-*), y este archivo define esas variables. Resultado: la cascada
   original de la plantilla queda intacta y la paleta vive en un solo lugar.

   El original sin tocar está en main.css.hyperspace-original, para poder
   comparar o rehacer la sustitución.

   ⚠️ Los valores de abajo son los mismos de design/paleta.mjs, que es lo
   que usa el panel. Si cambia la marca, cambian los dos.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Paleta oficial */
  --c-primary: #1D4EDB;        /* Azul Primario — acciones, enlaces, acentos */
  --c-primary-hover: #3B6FF0;  /* un paso más claro, para hover sobre oscuro */
  --c-primary-deep: #1740B8;   /* un paso más oscuro */
  --c-navy: #0B1320;           /* Azul Profundo */
  --c-gris-oscuro: #1F2937;
  --c-gris-medio: #6B7280;
  --c-gris-claro: #E5E7EB;

  /* Superficies. La landing es oscura a propósito: es el look de
     Hyperspace, y coincide con la paleta de modo oscuro que la guía define
     (fondo #0B1320, superficies elevadas #1F2937, texto #E5E7EB).
     ⚠️ Nunca negro puro — la guía lo prohíbe. */
  --c-bg: var(--c-navy);
  --c-bg-alt: #070D17;
  --c-surface: #131C2B;
  --c-surface-2: #0E1728;
  --c-surface-3: #0F1828;
  --c-surface-4: #0C1524;
  --c-border: #1F2937;

  /* Texto: la plantilla traía blanco al 55%, que sobre navy queda lavado.
     Estos son los valores que la guía fija para modo oscuro. */
  --c-text: var(--c-gris-claro);
  --c-text-strong: #FFFFFF;
  --c-text-muted: var(--c-gris-medio);

  --f-sans: "Inter 88tina", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Inter autoalojada. No se usa Google Fonts a propósito: una landing que
   depende de un tercero para renderizar texto es una dependencia gratuita,
   y el archivo son 48 KB que ya están en el repo. */
@font-face {
  font-family: "Inter 88tina";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../webfonts/inter.woff2") format("woff2");
}

/* La plantilla es de 2022 y fija tamaños en pt con font-size fluido propio.
   Se respeta; solo se ajusta el peso, porque Inter en regular sobre navy
   pesa menos ópticamente que Arial. */
body, input, select, textarea {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text-strong);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Barra lateral de navegación ─────────────────────────────────────── */
#sidebar {
  background: rgba(7, 13, 23, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid var(--c-border);
}

/* ── Marca en la barra lateral ───────────────────────────────────────── */
.marca-sidebar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0 1.6rem 0;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-border);
}
.marca-sidebar img { width: 34px; height: 34px; display: block; }
.marca-sidebar .n {
  font-weight: 700;
  color: var(--c-text-strong);
  font-size: 0.72em;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.marca-sidebar .t {
  display: block;
  font-weight: 400;
  color: var(--c-text-muted);
  font-size: 0.82em;
  letter-spacing: 0;
}

/* ── Botón principal: "Entrar a la app" ──────────────────────────────── */
/* La plantilla no trae un botón sólido de acento; el suyo es de borde. La
   guía pide que la acción primaria sea el azul de marca, sólido. */
.button.primario,
input[type="submit"].primario {
  background-color: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-weight: 600;
}
.button.primario:hover {
  background-color: var(--c-primary-hover) !important;
  border-color: var(--c-primary-hover) !important;
}
.button.primario:active { background-color: var(--c-primary-deep) !important; }

/* Enlace a la app dentro del sidebar, siempre visible */
.sidebar-cta { margin-top: 1.4rem; }
.sidebar-cta .button {
  width: 100%;
  text-align: center;
  font-size: 0.62em;
  padding: 0 1.2em;
  height: 3.4em;
  line-height: 3.4em;
}

/* ── Portada ─────────────────────────────────────────────────────────── */
#intro { position: relative; overflow: hidden; }
/* El mismo fondo del login del panel: la persona que entra a la app ve la
   misma imagen, así la landing y el producto se leen como una sola cosa. */
#intro:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/marca/fondo-login.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: 0;
}
#intro > .inner { position: relative; z-index: 1; }

.logo-hero { width: min(420px, 78vw); height: auto; margin-bottom: 1.6rem; display: block; }

.hero-sub {
  color: var(--c-text);
  max-width: 34em;
}
.hero-sub strong { color: var(--c-text-strong); font-weight: 600; }

/* Fichas de credibilidad bajo la portada */
.tiras { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.9rem 0 0 0; padding: 0; list-style: none; }
.tiras li {
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.42em 1.05em;
  font-size: 0.62em;
  color: var(--c-text);
  background: rgba(31, 41, 55, 0.35);
  letter-spacing: 0.01em;
}

/* ── Tarjetas reutilizables ──────────────────────────────────────────── */
.tarjetas { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 2rem 0 0 0; padding: 0; list-style: none; }
.tarjeta {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 1.6rem 1.5rem;
}
.tarjeta h3 { font-size: 0.82em; margin-bottom: 0.55em; }
.tarjeta p { font-size: 0.72em; margin: 0; color: var(--c-text); }
.tarjeta .num {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.1rem; block-size: 2.1rem; border-radius: 9px;
  background: var(--c-primary); color: #fff;
  font-weight: 700; font-size: 0.72em; margin-bottom: 0.9rem;
}

/* ── Diagrama de flujo (los pasos del deck) ──────────────────────────── */
.flujo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 2rem 0 0; padding: 0; list-style: none; }
.flujo li {
  position: relative;
  background: var(--c-surface-3);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 1.4rem 1.3rem;
}
.flujo li .paso { color: var(--c-primary-hover); font-weight: 700; font-size: 0.6em; letter-spacing: 0.09em; text-transform: uppercase; }
.flujo li h3 { font-size: 0.78em; margin: 0.5em 0 0.4em; }
.flujo li p { font-size: 0.68em; margin: 0; }

/* ── Comparativa de tiempos ──────────────────────────────────────────── */
.comparativa { margin: 2rem 0 0; }
.barra-fila { margin-bottom: 1.3rem; }
.barra-fila .etq { display: flex; justify-content: space-between; font-size: 0.68em; margin-bottom: 0.5rem; color: var(--c-text); }
.barra-fila .etq b { color: var(--c-text-strong); }
.barra-pista { background: var(--c-surface-4); border: 1px solid var(--c-border); border-radius: 999px; block-size: 1.35rem; overflow: hidden; }
.barra-valor { block-size: 100%; border-radius: 999px; }
.barra-valor.lento { background: var(--c-gris-oscuro); }
.barra-valor.rapido { background: linear-gradient(to right, var(--c-primary), var(--c-primary-hover)); }

/* ── Modelo de negocio ───────────────────────────────────────────────── */
.precio { display: flex; flex-direction: column; }
.precio .tipo { color: var(--c-primary-hover); font-size: 0.6em; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.7rem; }
.precio ul { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.precio ul li { font-size: 0.68em; padding-left: 1.3em; position: relative; margin-bottom: 0.45em; }
.precio ul li:before { content: "→"; position: absolute; left: 0; color: var(--c-primary-hover); }

/* ── Garantía ────────────────────────────────────────────────────────── */
.garantia {
  background: linear-gradient(135deg, var(--c-surface-3), var(--c-surface));
  border: 1px solid var(--c-primary-deep);
  border-radius: 18px;
  padding: 2.3rem 2rem;
  text-align: center;
  margin-top: 2rem;
}
.garantia .cifra { font-size: 2.6em; font-weight: 800; color: var(--c-text-strong); line-height: 1; letter-spacing: -0.03em; }
.garantia .cifra span { color: var(--c-primary-hover); }
.garantia p { margin: 0.9rem auto 0; max-width: 34em; font-size: 0.74em; }

/* ── Industrias ──────────────────────────────────────────────────────── */
.industrias { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.industrias li {
  border: 1px dashed var(--c-border);
  border-radius: 10px; padding: 0.7em 1.15em;
  font-size: 0.66em; color: var(--c-text);
}
.industrias li.viva { border-style: solid; border-color: var(--c-primary); color: var(--c-text-strong); background: rgba(29, 78, 219, 0.14); font-weight: 600; }

/* ── Pie ─────────────────────────────────────────────────────────────── */
#footer .marca-pie { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
#footer .marca-pie img { width: 26px; height: 26px; }

/* ── Accesibilidad (WCAG 2.2 AA, el estándar del proyecto) ───────────── */
a:focus-visible, button:focus-visible, .button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--c-primary-hover);
  outline-offset: 3px;
}
/* La plantilla anima al hacer scroll. Quien pidió menos movimiento en su
   sistema no debería recibirlo. */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; }
}

/* ── Correcciones sobre el mapeo de colores de Hyperspace ────────────────
   Dos hexes de la plantilla cumplían DOS papeles a la vez, así que una
   sustitución 1:1 no alcanzaba y hubo que separarlos acá:

   · #5052b5 y #3e4094 eran a la vez el fondo de .wrapper.style2 y un color
     de acento de texto. Al mapearlos al azul de marca, la sección entera
     quedó en azul sólido — se veía como un banner gigante, no como una
     sección de contenido. El acento sí quiere ser azul; el fondo no.
   · Verificado mirando la página, no leyendo el CSS. */
.wrapper.style2 { background-color: var(--c-surface) !important; }
.wrapper.style2-alt { background-color: var(--c-surface-2) !important; }
.wrapper.style1 { background-color: var(--c-bg) !important; }
.wrapper.style1-alt { background-color: var(--c-bg-alt) !important; }
.wrapper.style3 { background-color: var(--c-surface-3) !important; }
.wrapper.style3-alt { background-color: var(--c-surface-4) !important; }

/* El fondo de la portada competía con el logo: la marca gigante del SVG
   quedaba encima del lockup y se leían las dos superpuestas. Se baja la
   opacidad y se corre a la derecha, fuera de la columna de texto. */
#intro:before {
  opacity: 0.5;
  background-position: 76% center;
}
/* Velo para que el texto tenga contraste suficiente sobre el fondo
   (WCAG 2.2 AA — el estándar del proyecto). */
#intro:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-bg) 0%, rgba(11,19,32,0.88) 38%, rgba(11,19,32,0.42) 72%, rgba(11,19,32,0.28) 100%);
  z-index: 0;
}

/* ── Azul legible para texto chico sobre oscuro ──────────────────────────
   El azul de marca (#1D4EDB) y su hover (#3B6FF0) son colores de ACCIÓN:
   funcionan como fondo de botón o como acento grande. En texto de 10px
   sobre navy dan 3,8:1 — por debajo del 4,5:1 que exige WCAG 2.2 AA, que es
   el estándar del proyecto. Medido en la página, no estimado.

   Este tono es el mismo azul, aclarado hasta pasar el umbral. Se usa SOLO
   para etiquetas chicas; los botones siguen con el azul de marca. */
:root { --c-primary-text: #8AB0FF; }
.flujo li .paso,
.precio .tipo,
.precio ul li:before { color: var(--c-primary-text); }

/* ── Gris secundario legible sobre oscuro ────────────────────────────────
   La guía fija #6B7280 para texto secundario. Sobre fondo claro cumple; sobre
   el navy de esta landing da entre 3,2:1 y 4,0:1, por debajo del 4,5:1 de
   WCAG 2.2 AA. Medido sobre la página componiendo el alfa de cada capa, no
   estimado a ojo.

   ⚠️ No es contradecir la guía: es el mismo rol de color, aclarado lo justo
   para que se lea sobre un fondo que la guía no contemplaba. En el panel
   (fondo claro) se sigue usando #6B7280 tal cual.

   Afectaba: el subtítulo del sidebar, TODOS los enlaces de navegación no
   activos (que Hyperspace atenúa), la nota al pie de la comparativa y el
   pie de página entero — que estaba en 1,49:1, prácticamente ilegible. */
:root { --c-text-muted: #9AA6B7; }

#sidebar nav a { color: var(--c-text) !important; }
#sidebar nav a:hover,
#sidebar nav a.active { color: var(--c-text-strong) !important; }

#footer, #footer .menu li, #footer a { color: var(--c-text) !important; }
#footer a { text-decoration: underline; text-underline-offset: 2px; }

/* ── Acceso a la app en móvil ────────────────────────────────────────────
   Hyperspace esconde #sidebar por completo por debajo de ~1280px y no pone
   nada en su lugar: no hay menú hamburguesa. En una landing cuyo objetivo
   es llevar a la app, eso deja al visitante de celular sin el botón salvo
   que vuelva al inicio. Se agrega una barra fija abajo, solo en móvil.
   Verificado a 375px: la página no desborda horizontalmente. */
.cta-movil { display: none; }

@media screen and (max-width: 1280px) {
  .cta-movil {
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 10000;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(7, 13, 23, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--c-border);
  }
  .cta-movil .button {
    display: block;
    inline-size: 100%;
    text-align: center;
    font-size: 0.62em;
    height: 3.6em;
    line-height: 3.6em;
  }
  /* Que la barra no tape el final del contenido. */
  #footer { padding-block-end: 6rem; }
}

/* ── Iconos ──────────────────────────────────────────────────────────────
   Reemplazan a .icon.major de Hyperspace, que dibujaba un círculo blanco y
   ponía el glifo con un :before de FontAwesome. Se sacó FontAwesome entero
   (2,9 MB de fuentes + 224 KB de CSS para 4 iconos) y ahora el ícono es un
   <svg> inline dentro del mismo círculo.

   El círculo pasa de blanco a azul de marca: sobre navy, un disco blanco
   pesa demasiado y se lleva la atención por encima del titular. */
.icono-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border-radius: 100%;
  background: rgba(29, 78, 219, 0.16);
  border: 1px solid var(--c-primary);
  color: var(--c-primary-text);
  margin: 0 0 1.2rem 0;
}
.icono-svg svg { inline-size: 1.45rem; block-size: 1.45rem; display: block; }

/* Las fichas de la portada quedaban pegadas a los botones: Hyperspace no
   deja margen entre una lista suelta y .actions. */
#intro .tiras { margin-block-end: 2.2rem; }
#intro .actions { margin-block-start: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   PASADA DE DISEÑO — 2026-08-21
   Pedidos de Carlos: el botón de la app siempre arriba a la derecha, fondos
   que cambien entre secciones y se distingan del menú, el fondo del login
   reutilizado, y diagramas comerciales.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Botón de la app: fijo, arriba a la derecha ──────────────────────────
   Antes vivía dentro del menú lateral (y en una barra abajo en móvil), así
   que en escritorio se perdía al hacer scroll y en celular competía con el
   contenido. Fijo arriba a la derecha está siempre a la vista sin ocupar
   lugar en la lectura. */
.cta-fija {
  position: fixed;
  inset-block-start: 1.1rem;
  inset-inline-end: 1.4rem;
  z-index: 10001;
}
.cta-fija .button {
  font-size: 0.58em;
  height: 3.1em;
  line-height: 3.1em;
  padding: 0 1.5em;
  border-radius: 999px;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.65);
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}
/* Flecha que insinúa "salís de acá hacia la aplicación". */
.cta-fija .button::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.18s ease;
}
.cta-fija .button:hover::after { transform: translateX(3px); }

@media screen and (max-width: 736px) {
  .cta-fija { inset-block-start: 0.7rem; inset-inline-end: 0.7rem; }
  .cta-fija .button { font-size: 0.52em; padding: 0 1.2em; }
}

/* La barra inferior de móvil ya no hace falta: el botón fijo la reemplaza
   en todos los tamaños. */
.cta-movil { display: none !important; }
@media screen and (max-width: 1280px) { #footer { padding-block-end: 0; } }

/* ── Fondos alternados por sección ───────────────────────────────────────
   Pedido de Carlos: que el área de contenido se distinga del menú y que el
   fondo cambie al avanzar. El menú queda en el tono más hundido (#070D17) y
   las secciones alternan dos superficies más claras, con tres momentos de
   acento que traen el fondo del login.

   Se usa el atributo data-fondo en vez de las clases style1/2/3 de
   Hyperspace: aquellas mezclan fondo con otras decisiones (color de texto,
   bordes), y separar el fondo hace que reordenar secciones no rompa nada. */
#sidebar { background: #070D17 !important; }

[data-fondo="a"] { background-color: var(--c-surface) !important; }
[data-fondo="b"] { background-color: var(--c-surface-3) !important; }
[data-fondo="c"] { background-color: var(--c-bg) !important; }

/* Momentos de acento: el mismo fondo del panel de login. Es lo que ata
   visualmente la landing con el producto — quien entra ve la misma imagen. */
[data-fondo="marca"] {
  background-color: var(--c-bg) !important;
  position: relative;
  overflow: hidden;
}
[data-fondo="marca"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/marca/fondo-login.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: 0;
}
[data-fondo="marca"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,19,32,0.82) 0%, rgba(11,19,32,0.6) 50%, rgba(11,19,32,0.88) 100%);
  z-index: 0;
}
[data-fondo="marca"] > .inner { position: relative; z-index: 1; }

/* Línea de acento en el borde superior de cada sección: marca el corte sin
   necesidad de un separador aparte. */
#wrapper > section { border-block-start: 1px solid var(--c-border); }
#wrapper > section:first-child { border-block-start: 0; }

/* ── Diagramas ───────────────────────────────────────────────────────────
   Mismo sistema de clases que los de docs/bitacora.html, para que las dos
   piezas se lean como una sola familia. Son SVG escritos a mano: sin
   librerías, sin runtime y sin imágenes externas — así escalan sin pixelar
   y pesan unos pocos KB.

   Regla que los ordena: cada figura sostiene UNA afirmación, y las flechas
   van etiquetadas. Una flecha sin etiqueta dice "algo tienen que ver";
   "configura", "factura", "objeta" dicen qué pasa. */
.figura { margin: 2.4rem 0 0; }
.figura figcaption {
  font-size: 0.62em;
  color: var(--c-text-muted);
  margin-block-start: 0.9rem;
  line-height: 1.55;
}
/* El diagrama nunca desborda la página: si no entra, scrollea dentro de su
   propia caja. */
.figura .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.dia { width: 100%; height: auto; min-width: 620px; display: block; }
.dia .caja      { fill: var(--c-surface-3); stroke: var(--c-border); stroke-width: 1.5; }
.dia .caja.viva { fill: rgba(29, 78, 219, 0.13); stroke: var(--c-primary); stroke-width: 1.9; }
.dia .caja.tenue{ fill: none; stroke: var(--c-border); stroke-width: 1.4; stroke-dasharray: 6 5; }
.dia .zona      { fill: rgba(29, 78, 219, 0.05); stroke: var(--c-border); stroke-width: 1.4; stroke-dasharray: 5 5; }
.dia .titulo    { font-weight: 700; fill: var(--c-text-strong); }
.dia .sub       { fill: var(--c-text); }
.dia .apagado   { fill: var(--c-text-muted); }
.dia .rotulo {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; fill: var(--c-text-muted);
}
.dia .linea     { fill: none; stroke: var(--c-border); stroke-width: 2; }
.dia .linea.acento { stroke: var(--c-primary); stroke-width: 2.4; }
.dia .linea.corte  { stroke-dasharray: 5 4; }
.dia .etiqueta  { font-size: 10px; letter-spacing: 0.02em; fill: var(--c-primary-text); font-weight: 600; }
.dia .icono     { fill: none; stroke: var(--c-primary-text); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dia .num       { fill: var(--c-primary); }
.dia .num-txt   { font-size: 11px; font-weight: 700; fill: #FFFFFF; }