/* Shared styling for the four legal pages (/privacidad, /terminos,
   /terminos-abogados, /aviso-legal). Kept in one file rather than inlined
   per page so the four never drift apart visually — they are read side by
   side and any difference reads as "one of these is out of date".

   Tokens mirror the landing page so the documents feel part of the product
   rather than a bolted-on PDF. */

:root {
  --ink: #0f172a; --sky: #0ea5e9; --paper: #fff; --sand: #f7f8fa;
  --line: #e6e9ef; --text: #334155; --muted: #64748b; --warn: #b45309;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--sans); color: var(--text); background: var(--sand);
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}

a { color: #0369a1; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--sky); }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

header.nav { background: var(--paper); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; height: 64px; }
.nav-in a { text-decoration: none; }
.logo-img { height: 36px; width: auto; display: block; }

main { padding: 40px 0 80px; }

.doc {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 18px; padding: 40px;
  box-shadow: 0 20px 50px -34px rgba(15, 23, 42, .4);
}

h1 { color: var(--ink); font-size: 30px; letter-spacing: -.02em; line-height: 1.2; }
h2 {
  color: var(--ink); font-size: 20px; letter-spacing: -.01em;
  margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { color: var(--ink); font-size: 16.5px; margin: 20px 0 6px; }

p { margin: 12px 0; }
ul, ol { margin: 12px 0 12px 22px; }
li { margin: 7px 0; }

.meta { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.lead { font-size: 18px; margin-top: 16px; }

/* The entity placeholder. Deliberately loud: these documents are not
   enforceable until a legal entity is named, and nobody — us or a reader —
   should be able to miss that while it is still true. Delete the banner and
   the .todo spans together, in the same change. */
.pending {
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
  border-radius: 10px; padding: 16px 18px; margin: 24px 0; font-size: 15px;
}
.pending strong { color: var(--warn); }

.todo {
  background: #fef3c7; color: var(--warn); font-weight: 650;
  padding: 1px 7px; border-radius: 5px; font-size: .93em;
  white-space: nowrap;
}

/* Points that materially limit what the reader can expect from us. Called
   out visually because burying them in a wall of grey text is exactly the
   pattern that gets a clause thrown out as not-actually-agreed-to. */
.key {
  background: var(--sand); border: 1px solid var(--line);
  border-left: 4px solid var(--sky); border-radius: 10px;
  padding: 16px 18px; margin: 20px 0;
}
.key p:first-child { margin-top: 0; }
.key p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
th, td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--sand); color: var(--ink); font-weight: 650; }

/* Wide tables scroll inside their own box rather than pushing the page. */
.scroll { overflow-x: auto; }
.scroll table { min-width: 520px; }

.back { display: inline-block; margin-top: 32px; font-size: 15px; }

footer.ft {
  border-top: 1px solid var(--line); background: var(--paper);
  padding: 26px 0; font-size: 14px; color: var(--muted);
}
footer.ft .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
footer.ft a { color: var(--muted); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .doc { padding: 26px 20px; border-radius: 14px; }
  h1 { font-size: 25px; }
}