/*
 * Estilos comunes de las paginas legales de FACTOR.
 * Negro y dorado como el frontend y la app; el texto va sobre fondo claro
 * porque son documentos para leer, no pantallas de la aplicacion.
 */
:root {
  --negro: #0b0b0b;
  --dorado: #c9a24a;
  --dorado-oscuro: #8a6b22;
  --fondo: #f6f5f2;
  --papel: #ffffff;
  --texto: #1f1f1f;
  --texto-suave: #5b5b5b;
  --borde: #e4e0d6;
  --whatsapp: #1fa855;
  --whatsapp-oscuro: #178a45;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121212;
    --papel: #1b1b1b;
    --texto: #ececec;
    --texto-suave: #b4b4b4;
    --borde: #333;
    --dorado-oscuro: #d9b45e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.cabecera {
  background: var(--negro);
  border-bottom: 3px solid var(--dorado);
}

.cabecera-interior {
  max-width: 860px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cabecera img { height: 56px; width: auto; display: block; }

.navegacion { display: flex; gap: 6px 18px; flex-wrap: wrap; }

.navegacion a {
  color: #d8d8d8;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.navegacion a:hover { color: #fff; }
.navegacion a[aria-current="page"] { color: var(--dorado); border-bottom-color: var(--dorado); }

main {
  max-width: 860px;
  margin: 24px auto;
  padding: 32px 40px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 8px;
}

h1 { font-size: 30px; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 20px; margin: 34px 0 8px; padding-top: 6px; border-top: 1px solid var(--borde); }
h3 { font-size: 17px; margin: 22px 0 6px; }

.vigencia { color: var(--texto-suave); font-size: 14px; margin: 0 0 24px; }

a { color: var(--dorado-oscuro); }

ul, ol { padding-left: 22px; }
li { margin: 4px 0; }

.recuadro {
  background: color-mix(in srgb, var(--dorado) 10%, var(--papel));
  border-left: 4px solid var(--dorado);
  padding: 14px 18px;
  border-radius: 4px;
  margin: 18px 0;
}

.recuadro p:first-child { margin-top: 0; }
.recuadro p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--borde); }
th { background: color-mix(in srgb, var(--texto) 5%, var(--papel)); }

.boton-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--whatsapp);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  padding: 14px 22px;
  border-radius: 999px;
  margin: 8px 0 4px;
}

.boton-whatsapp:hover { background: var(--whatsapp-oscuro); }
.boton-whatsapp svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

.indice { list-style: none; padding: 0; }
.indice li { margin: 0 0 12px; }
.indice a { font-size: 18px; font-weight: 600; }
.indice span { display: block; color: var(--texto-suave); font-size: 15px; }

.pie {
  max-width: 860px;
  margin: 0 auto 32px;
  padding: 0 16px;
  color: var(--texto-suave);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 640px) {
  .cabecera img { height: 44px; }
  main { margin: 0; padding: 24px 16px; border: 0; border-radius: 0; }
  h1 { font-size: 25px; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { display: none; }
  tr { border-bottom: 1px solid var(--borde); padding: 6px 0; }
  td { border: 0; padding: 4px 0; }
  td:first-child { font-weight: 600; }
}