/* ============================================================
   LEGAL.CSS — MV Moda Femenina
   Shared styles for Términos and Privacidad pages
   ============================================================ */

body {
    background: var(--cream);
}

.legal-wrap {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 28px 80px;
}

.legal-eyebrow {
    font-family: var(--f-italic);
    font-style: italic;
    font-size: 13px;
    color: var(--gold);
    margin-bottom: 16px;
}

.legal-title {
    font-family: var(--f-display);
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin-bottom: 8px;
}

.legal-date {
    font-size: 12px;
    color: var(--warm-gray-2);
    margin-bottom: 48px;
    letter-spacing: 0.5px;
}

.legal-divider {
    height: 1px;
    background: var(--border);
    margin: 40px 0;
}

.legal-section {
    margin-bottom: 36px;
}

.legal-section h2 {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.legal-section h3 {
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 8px;
    margin-top: 20px;
}

.legal-section p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--warm-gray);
    margin-bottom: 12px;
}

.legal-section ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.legal-section ul li {
    font-size: 14px;
    line-height: 1.85;
    color: var(--warm-gray);
    margin-bottom: 6px;
}

.legal-section a {
    color: var(--gold-dark);
}

.legal-highlight {
    background: var(--cream-2);
    border-left: 3px solid var(--gold);
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 0 4px 4px 0;
}

.legal-highlight p {
    margin: 0;
    font-size: 13px;
}

/* ── Rights grid (Privacidad page) ── */

.legal-rights {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 20px 0;
}

.legal-right-item {
    background: var(--cream-2);
    border: 1px solid var(--border);
    padding: 16px 18px;
}

.legal-right-item strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px;
    font-family: var(--f-body);
}

.legal-right-item span {
    font-size: 13px;
    color: var(--warm-gray);
    line-height: 1.6;
}

/* ── Responsive ── */

@media (min-width: 600px) {
    .legal-rights {
        grid-template-columns: 1fr 1fr;
    }
}