
:root {
  --ink: #11182a;
  --muted: #66728b;
  --line: rgba(21,40,78,.12);
  --cyan: #22d9e7;
  --blue: #5c7cff;
  --purple: #b742f5;
  --gradient: linear-gradient(135deg, var(--cyan), var(--blue) 48%, var(--purple));
  --container: 980px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 8% 0%, rgba(34,217,231,.11), transparent 25%), radial-gradient(circle at 95% 5%, rgba(183,66,245,.10), transparent 25%), #f7f9ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.72;
}
a { color: #574ed8; }
.container { width: min(var(--container), calc(100% - 36px)); margin-inline: auto; }
.legal-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.legal-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
.brand strong { display: block; line-height: 1.1; }
.brand small { color: var(--muted); font-size: .72rem; }
.back-link { padding: 10px 14px; color: #2b3550; background: #fff; border: 1px solid var(--line); border-radius: 11px; font-size: .82rem; font-weight: 750; text-decoration: none; }
.legal-hero { padding: 88px 0 42px; }
.eyebrow { color: #167b92; font-size: .72rem; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase; }
h1 { max-width: 800px; margin: 15px 0 16px; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; letter-spacing: -3.4px; }
.lead { max-width: 760px; color: var(--muted); font-size: 1.05rem; }
.updated { display: inline-flex; margin-top: 14px; padding: 7px 11px; color: #536078; background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; }
.legal-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 42px; padding: 30px 0 90px; align-items: start; }
.legal-index { position: sticky; top: 105px; display: grid; gap: 7px; padding: 18px; background: rgba(255,255,255,.82); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 45px rgba(35,58,112,.07); }
.legal-index strong { margin-bottom: 4px; font-size: .8rem; }
.legal-index a { padding: 7px 9px; color: #66728b; border-radius: 8px; font-size: .76rem; text-decoration: none; }
.legal-index a:hover { color: #4f46d8; background: #f1f3ff; }
.legal-content { display: grid; gap: 18px; }
.legal-card { padding: clamp(23px, 5vw, 40px); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 50px rgba(35,58,112,.07); }
.legal-card h2 { margin: 0 0 14px; font-size: 1.55rem; letter-spacing: -.5px; }
.legal-card h3 { margin: 25px 0 7px; font-size: 1.02rem; }
.legal-card p, .legal-card li { color: #4e5a72; font-size: .92rem; }
.legal-card ul { padding-left: 20px; }
.notice { padding: 17px 18px; color: #3b4660; background: linear-gradient(135deg, rgba(34,217,231,.10), rgba(183,66,245,.08)); border: 1px solid rgba(92,124,255,.18); border-radius: 14px; }
.contact-box { display: grid; gap: 7px; padding: 20px; background: #f5f7ff; border: 1px solid var(--line); border-radius: 14px; }
.contact-box a { font-weight: 750; }
.legal-footer { padding: 30px 0; color: #758098; background: #eef2fb; border-top: 1px solid var(--line); font-size: .74rem; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label { display: grid; gap: 6px; color: #2c3851; font-size: .78rem; font-weight: 750; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 12px 13px; color: #172039; background: #fbfcff; border: 1px solid #dce2f0; border-radius: 10px; outline: none; font: inherit; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #6b78e8; box-shadow: 0 0 0 3px rgba(92,124,255,.10); }
.full { grid-column: 1 / -1; }
.form-button { min-height: 49px; padding: 0 20px; color: #071019; background: var(--gradient); border: 0; border-radius: 11px; font-weight: 850; cursor: pointer; }
.form-status { margin: 0; color: var(--muted); font-size: .75rem; }
@media (max-width: 800px) { .legal-layout { grid-template-columns: 1fr; } .legal-index { position: static; } }
@media (max-width: 560px) { .legal-hero { padding-top: 58px; } .form-grid { grid-template-columns: 1fr; } .full { grid-column: auto; } .back-link { font-size: 0; } .back-link::after { content: "Volver"; font-size: .8rem; } }
