/* ---------------------------------------------------------------------------
 * FAUCET — lo poco que no está ya en la landing.
 *
 * El color, la tipografía, los botones, las tarjetas y los campos vienen de
 * `/marca/landing.css`, que es el CSS COMPILADO de basisnetwork.com.co copiado
 * tal cual. Aquí solo va lo que aquella no tiene porque no lo necesita: la
 * barra de progreso del minado, las tres cajas de resultado y la rejilla de
 * datos de la red.
 *
 * Regla al tocar esto: si hace falta un color, sale de una variable de la
 * landing (`--accent-cyan`, `--text-strong`, `--accent-ink`…). Ninguna
 * constante de color nueva. Y NO hay tema oscuro: la marca es clara.
 * ------------------------------------------------------------------------- */

/* Hexadecimal largo dentro de un `.input`: en mono se ve de un golpe si sobran
   o faltan caracteres, que es el error que de verdad comete la gente. */
.input.mono-long {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.input[aria-invalid="true"] {
  border-color: #bd3a2c;
  box-shadow: 0 0 0 4px rgba(189, 58, 44, 0.14);
}

/* `hidden` tiene que ganarle a cualquier `display` de este fichero: el atributo
   pinta `display:none` con especificidad de agente de usuario y lo tumba la
   primera clase que pase por ahí. Es el fallo que no rompe nada y solo se ve
   en una captura. */
[hidden] { display: none !important; }

/* ── progreso del minado ─────────────────────────────────────────────────
   Enseña trabajo real —hashes hechos contra los esperados—, no una animación
   decorativa. Por eso la transición es corta: responde al dato, no lo adorna. */
.progreso { margin-top: 1.25rem; }
.progreso .barra {
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background-color: rgba(11, 37, 64, 0.10);
}
.progreso .relleno {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-sky));
  transition: width 0.25s ease;
}
@media (prefers-reduced-motion: reduce) { .progreso .relleno { transition: none; } }

/* ── resultado ───────────────────────────────────────────────────────────
   Las clases las pone `app.js` (`resultado ok|aviso|error`). No se tocan sin
   tocar app.js. */
.resultado {
  margin-top: 1.25rem;
  padding: 0.9rem 1.05rem;
  border-left: 3px solid;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-default);
}
.resultado.ok    { background-color: #E4F5EF; border-color: #0F7A5A; }
.resultado.aviso { background-color: #FBF1DC; border-color: #8A5D0A; }
.resultado.error { background-color: #FBE8E5; border-color: #B3382B; }
.resultado strong { color: var(--text-strong); }
.resultado .hash {
  display: block;
  margin: 0.5rem 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ── bloques de código ───────────────────────────────────────────────────
   Fondo hundido y no la tarjeta blanca: dentro de una `surface-card` un `pre`
   del mismo color desaparece. */
.bloque-codigo {
  margin: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  background-color: #F2F6F9;
  border: 1px solid rgba(11, 37, 64, 0.08);
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--text-strong);
}
.bloque-codigo code { font: inherit; }

/* ── rejilla de datos ────────────────────────────────────────────────────
   Etiqueta arriba, valor debajo. En dos columnas de una tarjeta, un `dl` de
   etiqueta-a-la-izquierda parte las URL a mitad de dominio. */
.dato {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(11, 37, 64, 0.07);
}
.dato > span:first-child {
  font-size: 0.8rem;
  color: var(--text-soft);
}
.dato > span:last-child {
  font-size: 0.85rem;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

/* ── el relleno de las cajas ─────────────────────────────────────────────
 * NINGUNA UTILIDAD `py-*` DE TAILWIND ES DE FIAR EN ESTA PÁGINA. `landing.css`
 * es el CSS **compilado** de basisnetwork.com.co, y Tailwind solo emite las
 * utilidades que la landing usa: `py-6` está y `py-7` no; `md:py-7` está y
 * `md:py-8` no. Una clase que no existe no falla, no avisa y no se ve en el
 * HTML: simplemente no hace nada.
 *
 * Eso dejaba las cuatro cajas de esta página con `padding-top` y
 * `padding-bottom` en CERO —el título tocando el borde de arriba y el último
 * párrafo el de abajo— mientras el relleno lateral sí funcionaba, porque
 * `px-6` y `md:px-8` sí existen.
 *
 * Por eso el relleno se declara aquí, en CSS propio, y no con utilidades: en
 * este fichero un valor escrito es un valor que se aplica. Las medidas son las
 * que la landing usa en /docs (24 px / 28 px, y 32 px desde `md`).
 * ---------------------------------------------------------------------- */
.caja-pedir  { padding: 2rem 1.5rem; }
.tarjeta-paso { padding: 1.75rem 1.5rem; }
.panel-datos { padding: 2rem 1.5rem; }

@media (min-width: 768px) {
  .caja-pedir  { padding: 2.5rem 2rem; }
  .tarjeta-paso { padding: 2rem 1.75rem; }
  .panel-datos { padding: 2.5rem 2.25rem; }
}

/* Las tres tarjetas de «Todo lo que necesitas» las iguala la rejilla, pero su
   contenido no llega a la misma altura: la primera lleva un bloque de comando
   y las otras no. Sin esto, el enlace de la tercera se quedaba a media caja
   con un palmo de blanco debajo. Columna flexible y el pie al fondo. */
.tarjeta-paso { display: flex; flex-direction: column; }
.tarjeta-paso .al-fondo { margin-top: auto; padding-top: 1.25rem; }

/* ── el ritmo de la página ───────────────────────────────────────────────
 * Mismo motivo que el relleno: `pb-20` tampoco existe en el CSS compilado, así
 * que la última sección se quedaba sin él. Y el resto mezclaba `.section`
 * (7 rem arriba y abajo) con `.section-narrow` (4 rem), lo que dejaba los
 * huecos entre bloques en 128, 176 y 128 px: el salto del medio se leía como
 * un olvido.
 *
 * Un solo valor para todas: 4 rem arriba y abajo, 128 px entre bloques de
 * punta a punta. El hero solo cambia por arriba, donde tiene que despegarse de
 * la barra: las mismas 7 rem —9 desde `lg`— que //docs.
 * ---------------------------------------------------------------------- */
.bloque      { padding-top: 4rem; padding-bottom: 4rem; }
.bloque-hero { padding-top: 7rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .bloque-hero { padding-top: 9rem; } }

/* ── el titular del hero ─────────────────────────────────────────────────
 * Llevaba un `<br>` a pelo entre «prueba» y «para». Partía el titular en un
 * renglón corto y otro largo —«LITHOS de prueba» contra «para construir sobre
 * Basis»— y dejaba TODO el renglón largo en degradado: 863 px de cyan a 72 px
 * de cuerpo, con el centro del degradado casi blanco sobre un fondo casi
 * blanco. El resto del proyecto usa el degradado al revés, sobre el tramo
 * corto y final del titular: «Acceso al JSON-RPC» en /docs, una sola palabra
 * en el manifiesto.
 *
 * Y el `<br>` era rígido: en móvil, con el titular a 40 px, forzaba cuatro
 * renglones en lugar de tres.
 *
 * Sin `<br>`, el reparto lo hace `balance`, que iguala los renglones al ancho
 * que toque. `text-balance` de Tailwind no está en el CSS compilado -- otra de
 * las que no existen -- así que va escrito aquí.
 * ---------------------------------------------------------------------- */
/* Vale para los dos titulares de sección por el mismo motivo: «Todo lo que
   necesitas para empezar» caía como un renglón lleno y otro con una palabra
   suelta, y «Por qué una prueba de trabajo y no un captcha» igual. */
.titular { text-wrap: balance; }

/* ── enlaces subrayados en cyan ──────────────────────────────────────────
 * El enlace a Discord del hero pedía `decoration-[color:var(--accent-cyan)]`,
 * `decoration-2` y `hover:decoration-[color:var(--accent-ink)]`. Las tres son
 * de las que el CSS compilado no trae, así que el subrayado salía del color
 * del texto y del grosor por defecto: el detalle de marca no se veía.
 *
 * Es el mismo subrayado que ya llevaban los enlaces de `.resultado`, así que
 * ahora sale de un sitio para los dos.
 * ---------------------------------------------------------------------- */
.enlace-marcado,
.resultado a {
  font-weight: 500;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent-cyan);
  text-decoration-thickness: 2px;
}
.enlace-marcado:hover { text-decoration-color: var(--accent-ink); }

/* ── el borde de los iconos sociales del pie ─────────────────────────────
 * El pie pide una opacidad sobre `var(--accent-cyan)`. Tailwind **no sabe**
 * meterla dentro de una `var()`: descarta la utilidad entera y no avisa, así
 * que ese borde no se encendia -- ni aqui ni en la landing, de donde viene
 * este markup.
 *
 * La landing se arreglo el 2026-08-24 pasando las catorce clases asi a
 * `color-mix`, y este HTML lleva ahora la misma clase, letra por letra.
 *
 * ESTA REGLA YA ES REDUNDANTE. Se escribio cuando `marca/landing.css` era una
 * copia congelada anterior al arreglo y no la traia; al refrescar esa copia
 * desde el `dist/` de la landing --el mismo 2026-08-24, al entrar GitHub y las
 * certificaciones en el pie-- la utilidad entro por su cuenta. Se conserva a
 * proposito: es un renglon y sostiene el hover si alguien vuelve a congelar el
 * CSS en una version vieja, que es exactamente como se rompio la primera vez.
 * ---------------------------------------------------------------------- */
.hover\:border-\[color\:color-mix\(in_srgb\,var\(--accent-cyan\)_40\%\,transparent\)\]:hover {
  border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);
}