/* Conversor OST a PST — identidad FieldRisk.

   Regla madre del manual de marca: todo es gris; el naranja solo aparece
   donde hay riesgo o alerta. Por eso ningun boton lleva color: el principal
   gana por contraste, aluminio sobre grafito. Si el naranja marcara tambien
   lo bueno, dejaria de significar nada.

   Esto es el armazon comun de las tres paginas. Lo propio de cada una va en
   su <style>, para que los colores no se dupliquen y acaben divergiendo. */

:root {
  color-scheme: dark;

  --grafito: #121417;
  --grafito-claro: #171A1E;
  --acero: #2B3036;
  --acero-claro: #363C44;
  --niebla: #8D949C;
  --gris: #4A5058;
  --aluminio: #E6E8EA;
  --senal: #F04A00;

  --papel: var(--grafito);
  --superficie: var(--grafito-claro);
  --superficie-2: #1C2025;
  --tinta: var(--aluminio);
  --tinta-2: var(--niebla);
  --tinta-3: var(--gris);
  --linea: var(--acero);
  --marino: var(--aluminio);
  --marino-vivo: #FFFFFF;
  --marino-tenue: var(--acero);
  --verde: var(--aluminio);
  --verde-tenue: var(--acero);
  --ambar: var(--senal);
  --codigo-fondo: #0C1013;
  --codigo-tinta: #C9D1D8;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.envoltura { max-width: 940px; margin: 0 auto; padding: 0 16px; }

a { color: var(--marino); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--marino);
  outline-offset: 3px;
}

/* Titulares con el ancho y el peso del logotipo. */
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 {
  font-size: clamp(28px, 4.8vw, 44px); line-height: 1.05; font-weight: 800;
  font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .01em; text-transform: uppercase;
}
h2 {
  font-size: clamp(21px, 3vw, 28px); line-height: 1.1; font-weight: 800;
  font-stretch: 125%; font-variation-settings: "wdth" 125;
  letter-spacing: .01em; text-transform: uppercase;
}
h3 { font-size: 18px; font-weight: 650; }
p { margin: 0; }

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marino); font-weight: 600;
}

/* ---------- cabecera ---------- */
.barra {
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
  position: sticky; top: 0; z-index: 10;
}
.barra .envoltura {
  display: flex; align-items: center; gap: 14px;
  padding-top: 12px; padding-bottom: 12px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; letter-spacing: -.01em;
  color: var(--tinta); text-decoration: none;
}
.logo svg { display: block; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.barra nav a { color: var(--tinta-2); text-decoration: none; }
.barra nav a:hover { color: var(--marino); }
@media (max-width: 640px) { .barra nav a.oculta-movil { display: none; } }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 600;
  padding: 13px 24px; border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primario { background: var(--aluminio); color: var(--grafito); border-color: var(--aluminio); }
.btn-primario:hover { background: #FFFFFF; border-color: #FFFFFF; }
.btn-secundario { background: transparent; color: var(--aluminio); border-color: var(--acero-claro); }
.btn-secundario:hover { border-color: var(--niebla); background: var(--acero); }
.btn-barra { padding: 8px 16px; font-size: 15px; }

/* ---------- paginas de contenido ----------
   Las que explican algo y viven en su propia direccion. Estaban repitiendo el
   mismo <style> en cada archivo, que es como empiezan a divergir: se cambia el
   margen en una y las otras se quedan atras. Las paginas legales siguen con su
   .documento, que no comparte medidas con estas. */
.articulo { max-width: 72ch; margin: 0 auto; padding: 48px 16px 72px; }
.articulo h1 { margin-bottom: 18px; }
.articulo h2 { font-size: 20px; margin: 46px 0 14px; }
.articulo h3 { margin: 28px 0 10px; color: var(--tinta); }
.articulo p { color: var(--tinta-2); margin-bottom: 14px; }
.articulo ul, .articulo ol { color: var(--tinta-2); padding-left: 22px; margin: 0 0 16px; }
.articulo li { margin-bottom: 9px; }
.articulo strong { color: var(--tinta); font-weight: 600; }
.articulo code {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: .9em; background: var(--codigo-fondo); color: var(--codigo-tinta);
  padding: 2px 6px; border-radius: 3px;
}

.migas {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 22px;
}
.migas a { color: var(--tinta-3); text-decoration: none; }
.migas a:hover { color: var(--tinta-2); }

.entradilla { font-size: 19px; color: var(--tinta-2); margin-bottom: 14px; }

/* Lo que puede ahorrarle el dinero a quien llega. Lleva el borde de senal por
   ser lo mas importante de la pagina, no por ser una alerta. */
.gratis {
  border-left: 3px solid var(--senal);
  background: var(--superficie); padding: 20px 22px; margin: 26px 0;
  color: var(--tinta); font-size: 17px;
}
.gratis p { color: var(--tinta); }
.gratis ol, .gratis ul { color: var(--tinta-2); margin-top: 14px; margin-bottom: 0; }

.nota {
  border-left: 3px solid var(--acero-claro);
  background: var(--superficie); padding: 16px 20px; margin: 24px 0;
  font-size: 16px;
}
.nota p:last-child { margin-bottom: 0; }

.tabla { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 15.5px; }
.tabla th, .tabla td {
  text-align: left; padding: 12px; border-bottom: 1px solid var(--linea);
  vertical-align: top; color: var(--tinta-2);
}
.tabla th {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 500;
}
.tabla td:first-child { color: var(--tinta); }
.envoltura-tabla { overflow-x: auto; }

/* Rutas y volcados: texto que hay que poder copiar sin que se reajuste. */
.ruta, .bytes {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 13.5px; line-height: 1.85;
  background: var(--codigo-fondo); color: var(--codigo-tinta);
  border: 1px solid var(--linea); border-radius: 3px;
  padding: 18px 20px; margin: 20px 0; overflow-x: auto; white-space: pre;
}
.bytes b { color: var(--senal); font-weight: 500; }

.cierre { border-top: 1px solid var(--linea); margin-top: 54px; padding-top: 34px; }
.cierre h2 { margin-top: 0; }
.articulo .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.bajo-boton { font-size: 14.5px; color: var(--tinta-3); }
.siguiente { margin-top: 38px; font-size: 15.5px; }

/* ---------- pie ---------- */
footer {
  border-top: 1px solid var(--linea); background: var(--superficie);
  padding: 32px 0; font-size: 14.5px; color: var(--tinta-3);
}
footer .envoltura { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
footer a { color: var(--tinta-2); text-decoration: none; }
footer a:hover { color: var(--marino); }
footer .derecha { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}