/* ============================================================
   LEGAL.CSS — Documentos legales (aviso legal, privacidad,
   términos, contrato). Usa tokens.css + chrome de dispositivo.css.
   Sitio público solo-oscuro: los tokens .dark siempre aplican.
   ============================================================ */

.legal-main {
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-24);
    background: var(--bg-page);
}

.legal-wrap {
    max-width: 860px;
}

/* ===== Pestañas entre documentos ===== */
.legal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
}

.legal-tab {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}

.legal-tab:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}

.legal-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

/* ===== Cabecera del documento ===== */
.legal-head {
    margin-bottom: var(--space-8);
}

.legal-head .eyebrow {
    display: inline-block;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.legal-head h1 {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
}

.legal-lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.legal-updated {
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    margin: 0;
}

/* ===== Cuerpo del documento ===== */
.legal-body h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin: var(--space-8) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.legal-body h2:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.legal-body p {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.legal-list {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
    list-style: none;
}

.legal-list li {
    position: relative;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-left: var(--space-4);
}

.legal-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent);
}

.legal-list li strong { color: var(--text-primary); }
.legal-body a, .legal-contact a { color: var(--secondary); text-decoration: underline; }
.legal-body a:hover, .legal-contact a:hover { color: var(--secondary-hover); }

/* ===== Bloque de contacto al pie ===== */
.legal-contact {
    margin-top: var(--space-12);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
}

.legal-contact h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.legal-contact p {
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin: 0 0 var(--space-4);
}

.legal-contact .legal-list li::before { top: .65em; }

@media (max-width: 640px) {
    .legal-head h1 { font-size: var(--fs-3xl); }
    .legal-contact { padding: var(--space-6); }
}