/* 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; }

/* ---------- 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; }
}