/* Pie común de 7ots.com + modal de contacto/feedback + páginas legales (server/site.mjs). */
.ots-foot {
  --of-bg: var(--surface-2, #16152a);
  --of-text: var(--text, #f0eff7);
  --of-muted: var(--text-muted, #9d9ab0);
  --of-border: var(--border, #ffffff1a);
  position: relative; z-index: 2;
  background: var(--of-bg); color: var(--of-text);
  border-top: 1px solid var(--of-border);
  font: 14px/1.5 var(--font-body, Inter, system-ui, sans-serif);
}
.ots-foot-in { max-width: var(--container, 1200px); margin: 0 auto; padding: 28px 16px 84px; display: grid; gap: 14px; }
.ots-eco-title { margin: 0; color: var(--of-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.ots-eco, .ots-legal, .ots-langs { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.ots-foot a { color: inherit; text-decoration: none; }
.ots-foot a:hover, .ots-foot a:focus-visible { text-decoration: underline; }
.ots-eco-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--of-border); border-radius: 999px; }
.ots-eco-link img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; background: #fff; padding: 1px; }
.ots-langs a { color: var(--of-muted); }
.ots-langs a[aria-current] { color: var(--of-text); font-weight: 600; }
.ots-rights { margin: 0; color: var(--of-muted); font-size: 12px; }

.ots-fb-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary, #5b47f0); color: var(--on-primary, #fff);
  font: 600 14px/1 var(--font-body, Inter, system-ui, sans-serif);
  box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
.ots-fb-btn:hover { background: var(--primary-hover, #4b36d6); }
.ots-fb-btn:focus-visible { outline: 3px solid var(--accent, #22d3ee); outline-offset: 2px; }

.ots-dlg {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  border: 1px solid var(--border, #ffffff1a); border-radius: 16px; padding: 24px;
  background: var(--surface, #16152a); color: var(--text, #f0eff7);
  font: 15px/1.5 var(--font-body, Inter, system-ui, sans-serif);
}
.ots-dlg::backdrop { background: rgb(11 10 20 / .6); }
.ots-dlg h2 { margin: 0 0 4px; font: 700 22px/1.2 var(--font-display, Inter, system-ui, sans-serif); }
.ots-dlg-x { position: absolute; top: 10px; right: 10px; margin: 0; }
.ots-dlg-x button { border: 0; background: none; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.ots-dlg { position: fixed; }

.ots-lead { color: var(--text-muted, #9d9ab0); margin: 0 0 16px; }
.ots-form { display: grid; gap: 12px; }
.ots-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.ots-form input, .ots-form textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border, #ffffff26); background: var(--bg, #0b0a14); color: inherit; font: inherit; font-weight: 400;
}
.ots-form textarea { resize: vertical; }
.ots-form input:focus, .ots-form textarea:focus { outline: 2px solid var(--primary, #5b47f0); outline-offset: 1px; }
.ots-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ots-rate { display: flex; gap: 8px; flex-wrap: wrap; }
.ots-rate button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border, #ffffff26); background: none; color: inherit; cursor: pointer; font: inherit; }
.ots-rate button[aria-pressed='true'] { border-color: var(--primary, #5b47f0); background: var(--primary-soft, #5b47f033); }
.ots-btn {
  display: inline-block; justify-self: start; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--primary, #5b47f0); color: var(--on-primary, #fff); font: 600 15px/1.2 var(--font-body, Inter, system-ui, sans-serif);
}
.ots-btn:disabled { opacity: .6; cursor: default; }
.ots-form-msg { margin: 0; min-height: 1em; font-size: 14px; }
.ots-form-msg.err { color: var(--error, #f87171); }
.ots-form-msg.ok { color: var(--success, #4ade80); font-weight: 600; }

/* páginas propias: privacidad, términos, contacto, 404 */
body.ots-page { margin: 0; background: var(--bg, #0b0a14); color: var(--text, #f0eff7); font: 16px/1.65 var(--font-body, Inter, system-ui, sans-serif); }
.ots-page-top { max-width: var(--measure, 660px); margin: 0 auto; padding: 20px 16px; }
.ots-page-logo { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 800 20px/1 var(--font-display, Inter, system-ui, sans-serif); }
.ots-page-main { max-width: var(--measure, 660px); margin: 0 auto; padding: 8px 16px 48px; }
.ots-legal-doc h1 { font: 800 clamp(28px, 6vw, 40px)/1.15 var(--font-display, Inter, system-ui, sans-serif); margin: 12px 0 8px; }
.ots-legal-doc h2 { font: 700 20px/1.3 var(--font-display, Inter, system-ui, sans-serif); margin: 28px 0 8px; }
.ots-legal-doc p { margin: 0 0 12px; }
.ots-legal-doc a { color: var(--link, #8b7cff); }
.ots-legal-doc a.ots-btn { color: var(--on-primary, #fff); }
.ots-updated { color: var(--text-muted, #9d9ab0); font-size: 14px; margin-top: 28px !important; }
.ots-404-code { font: 800 64px/1 var(--font-display, Inter, system-ui, sans-serif); color: var(--primary, #8b7cff); margin: 24px 0 0 !important; }