/*
  Estilo de las páginas legales (términos y privacidad). Es el de la landing
  —paleta y tipografías de htop.pe—, reducido a una columna de lectura.
*/
:root {
  --marino-hondo: #071627;
  --marino: #0A1E33;
  --oro: #E8B31B;
  --texto: #F4F6F8;
  --tenue: rgba(244, 246, 248, .78);
  --apagado: rgba(244, 246, 248, .55);
  --linea: rgba(244, 246, 248, .14);
  --f-titulo: "Archivo", Arial, sans-serif;
  --f-texto: "Inter", Helvetica, Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --canal: clamp(16px, 5vw, 56px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--marino-hondo); color: var(--texto);
  font: 400 16.5px/1.7 var(--f-texto); -webkit-font-smoothing: antialiased;
}
a { color: var(--oro); text-underline-offset: 3px; }
a:hover { color: #F2C230; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px;
  background: var(--oro); color: var(--marino-hondo); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 8px; }

.cabecera { border-bottom: 1px solid var(--linea); background: var(--marino-hondo); }
.cabecera div {
  max-width: 78rem; margin: 0 auto; padding: 0 var(--canal); height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cabecera img { height: 30px; width: auto; display: block; }
.cabecera .volver {
  font: 700 12px/1 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue); text-decoration: none; padding: 12px 0;
}
.cabecera .volver:hover { color: var(--oro); }

main { max-width: 46rem; margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--canal) 80px; }
.rotulo {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font: 500 12px/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--oro);
}
.rotulo::before { content: ""; width: 40px; height: 1px; background: currentColor; }
h1 {
  margin: 18px 0 0; font: 800 clamp(2rem, 5vw, 3rem)/1 var(--f-titulo);
  text-transform: uppercase; letter-spacing: -.012em; text-wrap: balance;
}
.fecha { margin: 18px 0 0; font: 500 12px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.resumen {
  margin: 32px 0 0; padding: 18px 20px; border-left: 2px solid var(--oro);
  background: rgba(232, 179, 27, .07); color: var(--tenue);
}
.resumen p { margin: 0; }
.resumen p + p { margin-top: 10px; }
.resumen b { color: var(--texto); }

nav.indice { margin: 36px 0 0; padding: 18px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
nav.indice ol { margin: 0; padding-left: 1.6em; columns: 2 16rem; column-gap: 32px; font-size: 15px; }
nav.indice li { break-inside: avoid; padding: 2px 0; color: var(--apagado); }
nav.indice a { color: var(--tenue); text-decoration: none; }
nav.indice a:hover { color: var(--oro); }

h2 {
  margin: 52px 0 0; scroll-margin-top: 24px;
  font: 800 1.35rem/1.25 var(--f-titulo); text-transform: uppercase; letter-spacing: -.005em;
}
h2 span { color: var(--oro); font: 500 13px/1 var(--f-mono); letter-spacing: .1em; margin-right: 12px; vertical-align: 3px; }
h3 { margin: 26px 0 0; font: 700 1.05rem/1.35 var(--f-titulo); }
main p, main ul, main ol { color: var(--tenue); }
main > p, h2 + p, h3 + p, ul + p, table + p { margin: 14px 0 0; }
main ul { margin: 12px 0 0; padding-left: 1.2em; }
main li + li { margin-top: 6px; }
main b, main strong { color: var(--texto); font-weight: 600; }

.tabla { margin: 18px 0 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--linea); }
th { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
td { color: var(--tenue); }
td:first-child { color: var(--texto); font-weight: 600; white-space: nowrap; }
td code, p code, li code { font: 500 13.5px var(--f-mono); color: var(--texto); }

.empresa { margin: 16px 0 0; padding: 16px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.empresa div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 4px 0; }
.empresa dt { min-width: 9rem; font: 500 12px/1.9 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }
.empresa dd { margin: 0; color: var(--texto); }

.pie { border-top: 1px solid var(--linea); padding: 32px var(--canal); font-size: 14px; color: var(--apagado); }
.pie div { max-width: 78rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.pie a { color: var(--tenue); text-decoration: none; }
.pie a:hover { color: var(--oro); }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 560px) {
  td:first-child { white-space: normal; }
  .empresa dt { min-width: 0; width: 100%; }
}
@media print {
  body { background: #fff; color: #000; }
  .cabecera, .pie, nav.indice, .saltar { display: none; }
  main p, main ul, main ol, td, .resumen { color: #000; }
  h2 span, .rotulo, a { color: #000; }
}