/* ============================================================
   Legal pages (aviso-legal, politica-privacidad, politica-cookies).
   body.sub: tokens, header, footer and cookie banner come from home.css
   (its shell rules are scoped to :is(.home, .sub)); this file only
   styles the page content. Loaded after styles.css and home.css.
   ============================================================ */
.sub .legal-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--header-h) + 3rem) 2.5rem 5rem;
}

.sub .legal-main h1 {
    font-family: var(--font);
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ink);
    margin: 0 0 2rem;
}

.sub .legal-main h2 {
    font-family: var(--font);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
    margin: 2.5rem 0 0.6rem;
}

.sub .legal-main p,
.sub .legal-main li {
    font-family: var(--font);
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}

.sub .legal-main p,
.sub .legal-main ul {
    max-width: 75ch;
}

.sub .legal-main p { margin: 0 0 1rem; }
.sub .legal-main ul { padding-left: 1.4rem; margin: 0.5rem 0 1rem; }
.sub .legal-main strong { font-weight: 700; color: var(--ink); }

.sub .legal-main a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sub .legal-main a:hover { color: var(--ink); }
.sub .legal-main a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 1024px) {
    .sub .legal-main { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sub .legal-main h1 { font-size: 2.2rem; }
}
@media (max-width: 768px) {
    .sub .legal-main { padding-left: 1.2rem; padding-right: 1.2rem; }
}