/* Al cambiar este archivo, sube el ?v= del <link> en las cinco paginas.
   Sin eso, la cache de una hora esconde el cambio y parece que no se aplico. */
/* La paleta de Metrollito. El porque de cada tono esta en docs/branding.html.
   En corto: Ratito es calido (crema, ambar, cobre) y Metrollito es frio
   (noche, pizarra, destello). La temperatura es lo que los separa.

   PIZARRA SOBRE NOCHE DA 3,31:1. Vale para verse, no para leerse: lleva
   rotulos cortos en versales y enlaces, nunca un parrafo. Es la misma
   distincion que la app tiene entre sage y sageText. */
:root {
  --noche: #0E1A24;      /* el fondo */
  --honda: #1B2F3D;      /* superficies elevadas */
  --pizarra: #46708A;    /* marca: rotulos y enlaces */
  --bruma: #7FA3B8;      /* texto secundario — 6,57:1 */
  --niebla: #E6EDF2;     /* texto principal — 14,90:1 */
  --destello: #FFD38A;   /* la cabeza del meteorito — 12,53:1 */
  --borde: #2A4457;

  /* El ambar de Ratito. Vive aqui porque el sitio lo presenta, no porque sea
     de Metrollito: cada producto trae su color y destaca sobre la noche. */
  --ratito: #E8963C;

  --display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cuerpo: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px;
  background: var(--noche);
  color: var(--niebla);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.envoltura { max-width: 42rem; margin: 0 auto; padding: 44px 0 72px; }

/* --- la marca --- */
header.marca { padding-bottom: 10px; }
header.marca .logo {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
}
header.marca .logo svg { display: block; flex: none; border-radius: 23%; }
header.marca .logo span {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; color: var(--niebla);
}

h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 6.5vw, 2.7rem); line-height: 1.06;
  letter-spacing: -.028em; text-wrap: balance; margin: 26px 0 10px;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.3rem; letter-spacing: -.015em;
  margin: 44px 0 8px; text-wrap: balance;
}
h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin: 26px 0 4px; }

p, li { color: var(--niebla); }
.entradilla { font-size: 1.14rem; color: var(--bruma); margin-top: 0; }
.fecha { font-size: .9rem; color: var(--bruma); margin: 0 0 32px; }

a { color: var(--pizarra); }
a:hover { color: var(--destello); }

ul { padding-left: 1.2rem; }
li { margin-bottom: 7px; }
li::marker { color: var(--pizarra); }

hr { border: 0; border-top: 1px solid var(--borde); margin: 48px 0; }

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: .95rem; }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th {
  font-family: var(--display); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--bruma);
  background: var(--honda);
}
tr:last-child td { border-bottom: 0; }

/* --- la tarjeta de un producto --- */
.tarjeta {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 18px; margin: 16px 0;
  background: var(--honda); border: 1px solid var(--borde);
  border-left: 4px solid var(--ratito);
  border-radius: 13px; text-decoration: none; color: inherit;
}
.tarjeta:hover { border-color: var(--pizarra); border-left-color: var(--ratito); }
.tarjeta img { display: block; flex: none; width: 46px; height: 46px; border-radius: 22%; }
.tarjeta .texto { min-width: 0; }
.tarjeta strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 1.1rem; color: var(--niebla); margin-bottom: 3px;
}
.tarjeta span { color: var(--bruma); font-size: .95rem; line-height: 1.55; }

/* El rotulo corto en pizarra. Aqui el 3,31:1 vale: son versales grandes y
   espaciadas, no texto corrido. */
.rotulo {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--pizarra);
  margin: 40px 0 10px;
}

footer {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--borde);
  font-size: .92rem; color: var(--bruma);
}
footer a { color: var(--bruma); }
footer a:hover { color: var(--destello); }

.nota {
  background: var(--honda); border-left: 3px solid var(--pizarra);
  padding: 13px 17px; margin: 22px 0; border-radius: 0 9px 9px 0;
  font-size: .96rem;
}
.nota strong { color: var(--destello); }

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

/* --- las paginas legales --- */
/* Un revisor de tienda no lee una politica: la escanea buscando una clausula.
   Por eso estas paginas llevan indice, secciones numeradas y ancla propia, y
   el titular se contiene: aqui no hay nada que vender. */
.documento h1 {
  font-size: clamp(1.55rem, 4.4vw, 1.95rem);
  letter-spacing: -.02em; margin: 22px 0 6px;
}
.documento .meta {
  font-size: .88rem; color: var(--bruma);
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 1px solid var(--borde);
}
.documento .meta b { color: var(--niebla); font-weight: 600; }

.indice {
  background: var(--honda); border: 1px solid var(--borde);
  border-radius: 12px; padding: 18px 20px; margin: 0 0 34px;
}
.indice p {
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--pizarra);
  margin: 0 0 11px;
}
.indice ol {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 28px; font-size: .92rem;
}
.indice li { margin: 0 0 6px; break-inside: avoid; }
.indice a { color: var(--niebla); text-decoration: none; }
.indice a:hover { color: var(--destello); text-decoration: underline; }
.indice .num {
  color: var(--pizarra); font-variant-numeric: tabular-nums;
  margin-right: 7px; font-weight: 600;
}
@media (max-width: 560px) { .indice ol { columns: 1; } }

.documento h2 {
  font-size: 1.08rem; margin: 36px 0 8px;
  scroll-margin-top: 18px;
}
.documento h2 .num {
  color: var(--pizarra); font-variant-numeric: tabular-nums; margin-right: 9px;
}
.documento p, .documento li { font-size: .97rem; }