.legal { background: #f7fafc; }
.legal__hero { padding: 3rem 0 2.2rem; background: linear-gradient(135deg, #f2f8fb, #e8f4f1); border-bottom: 1px solid var(--linea); }
.legal__hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--azul); margin: .5rem 0 .6rem; }
.legal__hero p { max-width: 760px; color: var(--tinta); line-height: 1.7; }
.legal__wrap { max-width: 900px; margin: 0 auto; padding: 2.2rem 0 4rem; }
.legal__meta { font-size: .82rem; color: var(--tinta-suave); border-left: 3px solid var(--verde); padding-left: .9rem; margin-bottom: 1.8rem; }
.legal__wrap h2 { font-size: 1.25rem; color: var(--azul); margin: 2rem 0 .6rem; }
.legal__wrap h3 { font-size: 1rem; color: var(--azul); margin: 1.2rem 0 .4rem; }
.legal__wrap p, .legal__wrap li { line-height: 1.75; color: var(--tinta); }
.legal__wrap ul, .legal__wrap ol { padding-left: 1.3rem; }
.legal__wrap li { margin-bottom: .35rem; }
.legal__tabla { width: 100%; border-collapse: collapse; margin: .8rem 0 1rem; font-size: .88rem; }
.legal__tabla th, .legal__tabla td { border: 1px solid var(--linea); padding: .55rem .65rem; text-align: left; vertical-align: top; }
.legal__tabla th { background: #eef5f7; color: var(--azul); }
.legal__box { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 1rem 1.2rem; margin: 1rem 0; }
.legal__box strong { color: var(--azul); }
@media (max-width: 700px) { .legal__tabla { display: block; overflow-x: auto; } }