/* =========================================================================
   GDPR UI (legal.js): legal pages, cookie banner, policy modal, footer.
   ========================================================================= */

/* ---------- footer ---------------------------------------------------------- */
.site-footer {
    margin-top: 4rem;
    padding: 1.5rem 1.25rem 2rem;
    border-top: 2px solid var(--border);
    text-align: center;
    color: var(--text-mute);
    font-size: .88rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer p { margin: 0; }

/* ---------- legal pages ----------------------------------------------------- */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.legal-body { line-height: 1.6; }
.legal-body h1 { font-size: 2rem; margin: .5rem 0 .3rem; }
.legal-body h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.legal-body p, .legal-body li { color: var(--text-dim); }
.legal-body strong { color: var(--text); }
.legal-body table { width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem; font-size: .92rem; display: block; overflow-x: auto; }
.legal-body th, .legal-body td { border: 1px solid var(--border); padding: .5rem .65rem; text-align: left; vertical-align: top; }
.legal-body th { background: var(--surface-2); }
.legal-body code { background: var(--surface-3); padding: .05rem .3rem; border-radius: 5px; }
.legal-body a { color: var(--accent); }

/* ---------- checkboxes used in the banner, modal and sign-up --------------------- */
.cb-opt {
    display: flex !important; gap: .6rem; align-items: flex-start;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: .9rem !important; color: var(--text) !important;
    margin: .5rem 0 !important;
    cursor: pointer;
}
.cb-opt input { width: 18px !important; height: 18px; margin: .1rem 0 0 !important; flex: none; accent-color: var(--lv-1); }
.cb-opt a { color: var(--accent); }

/* ---------- cookie banner --------------------------------------------------------- */
.cookie-banner {
    position: fixed; z-index: 90;
    left: 50%; bottom: 1rem;
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 2rem));
    display: flex; gap: 1.25rem; align-items: flex-end;
    padding: 1.1rem 1.25rem;
    border-radius: 18px;
    border: 2px solid var(--border); border-bottom-width: 6px;
    background: var(--surface);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .35);
    animation: cb-up .35s cubic-bezier(.22, 1, .36, 1) both;
}
.cookie-banner h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
.cookie-banner p { margin: 0; color: var(--text-dim); font-size: .9rem; line-height: 1.45; }
.cookie-banner a { color: var(--accent); }
.cb-main { flex: 1; }
.cb-detail { margin-top: .6rem; }
.cb-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.cb-actions .btn-3d { padding: .6rem 1rem; font-size: .82rem; }
/* Accept and reject carry the same weight: no dark pattern. */
.cookie-banner .cb-actions .btn-3d:not(.secondary) { --b: var(--lv-2); }
@keyframes cb-up { from { opacity: 0; transform: translate(-50%, 30px); } }

/* ---------- policy modal ------------------------------------------------------------ */
.terms-modal {
    position: fixed; inset: 0; z-index: 95;
    display: grid; place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
    animation: qz-in .2s both;
}
.tm-card {
    width: min(520px, 100%);
    padding: 1.5rem;
    border-radius: 20px;
    border: 2px solid var(--border); border-bottom-width: 6px;
    background: var(--surface);
}
.tm-card h2 { margin: 0 0 .5rem; }
.tm-card p { color: var(--text-dim); line-height: 1.5; }
.tm-card a { color: var(--accent); }
.tm-card .cb-actions { margin-top: 1rem; }
.tm-card .btn-3d:not(.secondary) { --b: var(--lv-1); }

@media (max-width: 640px) {
    .cookie-banner { flex-direction: column; align-items: stretch; bottom: .5rem; }
    .cb-actions .btn-3d { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-banner, .terms-modal { animation: none; }
}

/* =========================================================================
   Identidad cyberpunk — GDPR UI skin (see careers.css).
   ========================================================================= */
.cookie-banner, .tm-card {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 18px 40px -16px rgba(0, 0, 0, .5);
}
.cookie-banner h2, .tm-card h2 { text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; }
/* Accept and reject keep the same visual weight (AEPD): two outlined
   buttons and one solid of equal size, no hidden reject. */
.cookie-banner .cb-actions .btn-3d:not(.secondary) { --b: var(--accent); }
.tm-card .btn-3d:not(.secondary) { --b: var(--accent); }
.cb-opt input { accent-color: var(--accent); }
.legal-body h1, .legal-body h2 { text-transform: uppercase; letter-spacing: .06em; }
.legal-body h2 { color: var(--accent); font-size: 1.05rem; }
.legal-body table { border-radius: var(--r-sm); }
.legal-body th { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.site-footer { border-top: 1px solid var(--accent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; }
.site-footer a { text-transform: uppercase; letter-spacing: .06em; }
.tm-out { font-size: .85rem; }