/* ============================================================
   SynapsePay · páginas legales
   Va en public/ para que Vite la copie tal cual y las tres páginas
   la compartan. Misma identidad que la home: Inter y la paleta violeta,
   con los cuatro niveles de luminosidad de data-theme.
   ============================================================ */

:root {
  --fondo: #F6F5FF;
  --papel: #FFFFFF;
  --texto: #191919;
  --tenue: #6B6785;
  --linea: #E4E2F3;
  --acento: #7C76B7;
  --accion: #554FA0;
  --oscuro: #211D4F;
  --aviso-fondo: #FCEDEC;
  --aviso-borde: #F3D4D1;
  --aviso-texto: #B8342B;
  --r: .75rem;
  --r-lg: 1.15rem;
  --ancho: 46rem;
}

html[data-theme="claro"]   { --fondo:#FFFFFF; --papel:#FAF9FF; }
html[data-theme="suave"]   { --fondo:#F6F5FF; --papel:#FFFFFF; }
html[data-theme="tenue"]   { --fondo:#EDEBFA; --papel:#FFFFFF; }
html[data-theme="oscuro"] {
  --fondo:#15122E; --papel:#1D1940; --texto:#EFEEFB; --tenue:#A9A4C9;
  --linea:#2E2960; --acento:#9A94D0; --accion:#B9B4E4; --oscuro:#0F0C24;
  --aviso-fondo:#3A1E1F; --aviso-borde:#6B2E2C; --aviso-texto:#F0A9A4;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accion); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }

/* ---------- cabecera ---------- */
.tope {
  background: var(--oscuro);
  color: #EFEEFB;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
}
.marca { font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; color: #fff; }
.marca span { color: var(--acento); }
.tope nav { margin-left: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.tope nav a { color: rgba(239,238,251,.78); font-size: .86rem; border: 0; }
.tope nav a:hover, .tope nav a[aria-current="page"] { color: #fff; }
.tope nav a[aria-current="page"] { font-weight: 600; }

.temas { display: flex; gap: .2rem; border: 1px solid rgba(239,238,251,.28); border-radius: 999px; padding: .15rem; }
.temas button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0;
  color: rgba(239,238,251,.7); font-size: .78rem; line-height: 1;
}
.temas button[aria-pressed="true"] { background: var(--acento); color: #15122E; }

/* ---------- portada del documento ---------- */
.portada {
  background: var(--oscuro);
  color: #EFEEFB;
  padding: 2.4rem 1.5rem 2.8rem;
}
.portada .caja { max-width: var(--ancho); margin: 0 auto; }
.portada .eyebrow {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--acento); font-weight: 600; margin: 0 0 .5rem;
}
.portada h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .6rem; color: #fff; }
.portada p { margin: 0; color: rgba(239,238,251,.72); font-size: .95rem; max-width: 34rem; }
.portada .fechas { margin-top: 1rem; font-size: .8rem; color: rgba(239,238,251,.6); }

/* ---------- cuerpo ---------- */
.cuerpo { max-width: var(--ancho); margin: 0 auto; padding: 2.2rem 1.5rem 4rem; }

.indice {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.4rem;
}
.indice h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); margin: 0 0 .7rem; }
.indice ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.indice li { font-size: .88rem; margin-bottom: .3rem; break-inside: avoid; }
.indice a { border: 0; color: var(--texto); }
.indice a:hover { color: var(--accion); }

section.art { margin-bottom: 2.2rem; scroll-margin-top: 5rem; }
section.art h2 {
  font-size: 1.15rem; letter-spacing: -.02em; margin: 0 0 .6rem;
  padding-top: .3rem;
}
section.art h3 { font-size: .98rem; margin: 1.4rem 0 .4rem; }
section.art p { margin: 0 0 .8rem; }
section.art ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
section.art li { margin-bottom: .35rem; }

.destacado {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.destacado p:last-child { margin-bottom: 0; }

.aviso {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  color: var(--aviso-texto);
  border-radius: var(--r);
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
  font-size: .9rem;
  font-weight: 500;
}

table.datos {
  width: 100%; border-collapse: collapse; font-size: .88rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r); overflow: hidden; margin: 1.2rem 0;
}
table.datos th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); font-weight: 600; padding: .6rem .8rem;
  border-bottom: 1px solid var(--linea);
}
table.datos td { padding: .6rem .8rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos td:first-child { font-weight: 600; }

.contacto {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.3rem 1.5rem; margin-top: 2.6rem;
}
.contacto h2 { font-size: 1rem; margin: 0 0 .6rem; }
.contacto p { margin: 0 0 .4rem; font-size: .9rem; }

/* ---------- pie ---------- */
.pie {
  border-top: 1px solid var(--linea);
  background: var(--papel);
  padding: 2rem 1.5rem 2.6rem;
}
.pie .caja { max-width: var(--ancho); margin: 0 auto; }
.pie .enlaces { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .9rem; }
.pie small { color: var(--tenue); font-size: .8rem; display: block; line-height: 1.6; }

.volver { display: inline-block; margin-bottom: 1.2rem; font-size: .88rem; }

@media (max-width: 620px) {
  .indice ol { columns: 1; }
  .portada h1 { font-size: 1.55rem; }
  .tope { position: static; }
  .tope nav { width: 100%; margin-left: 0; }
}

@media print {
  .tope, .pie .enlaces, .temas, .volver, .indice { display: none; }
  body { background: #fff; color: #000; }
  .portada { background: #fff; color: #000; padding: 0 0 1.5rem; }
  .portada h1, .portada p, .portada .fechas { color: #000; }
  .cuerpo { max-width: none; padding: 0; }
  section.art { break-inside: avoid-page; }
  a { color: #000; }
}