/* ============================================================ PÁGINA LEGAL — templates/page-legal.php Aviso legal / Política de privacidad / Política de cookies. Prefijo: .lg- · Fuente: Space Grotesk (igual que .post-content) Reutiliza tokens y recetas ya existentes del tema en lugar del juego «--os-*» del handoff de Claude Design: · etiqueta superior -> misma receta que .central-eyebrow / .pr-badge · tarjeta -> sombra de .block-card / .post-content · bloque azul + CTA -> misma receta que blocks/cta-franja ============================================================ */ body.opensalud-legal { /* Fondo gris de documento — como .pr-page / .arc-page, pero desde body para que cubra también las columnas laterales del grid del tema. */ background: var(--bg); } .lg-page { background: var(--color-white-04); color: var(--color-text); font-family: var(--font-serif); font-size: var(--font-size-medium); line-height: var(--line-height-medium); font-weight: var(--font-weight-400); min-height: 100vh; /* Fondo a sangre, pero el contenido limitado al ancho del header: el gutter crece lo necesario para que la rejilla no pase de 1600px. */ padding: 118px max(var(--wp--custom--section--x), (100% - var(--wp--custom--layout--content-size)) / 2) var(--wp--custom--section--y-compact); display: grid; grid-template-columns: 30% 1fr; grid-template-rows: auto; gap: 0 2rem; } /* ── Hero ───────────────────────────────────────────────── Sección independiente tras get_header(), igual que .pr-hero / .arc-hero en el resto de plantillas PHP. Mismos estilos que .arc-hero (assets/css/single.css): imagen "principal" + degradado blanco, texto centrado, alto mínimo.
es grid-column: 1 / -1 en el tema, así que ocupa todo el ancho sin necesidad de .alignfull. */ .lg-hero, .lg-content { text-align: start; display: flex; /* align: arriba (un hero corto no se estira al alto del contenido). justify: stretch para que .lg-content llene su columna 1fr; con flex-start tomaba su ancho max-content y se desbordaba de la rejilla (y del , que recorta con overflow-x: hidden). */ align-self: flex-start; justify-self: stretch; flex-direction: column; font-family: var(--font-serif); font-size: var(--font-size-medium); line-height: var(--line-height-medium); color: var(--color-text); min-width: 0; background: var(--color-white); box-shadow: var(--shadow-card); padding: var(--pad-element); border-radius: var(--standard-border-radius); } /* single.css trae una regla global anidada ":root section { margin: auto !important }". Se neutraliza en los
propios de la plantilla para que .lg-hero llene su columna de la rejilla y las tarjetas no se centren. */ .lg-page section { margin: 0 !important; } .lg-hero-wrapper { max-width: 780px; margin: 0 auto 2em; display: flex; flex-direction: column; align-items: flex-start; } .lg-badge { display: inline-flex; align-items: center; column-gap: 8px; margin: 18px 0; padding: 8px 16px; border: 1px solid var(--wp--preset--color--transparent--blue); border-radius: var(--wp--custom--radius--full); background-color: var(--wp--preset--color--transparent--blue); color: var(--wp--preset--color--main-blue); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--weight-700); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; } /* Título = siempre el título de la página, en negro (sin resalte azul de : el texto viene de get_the_title() escapado, no lleva markup). */ .lg-hero h1 { font-family: 'Space Grotesk', sans-serif; margin: 0; font-size: var(--wp--preset--font-size-h2); line-height: var(--wp--preset--line-height-h2); font-weight: var(--wp--custom--weight-500); color: var(--wp--preset--color--black); text-wrap: balance; } .lg-hero-intro { margin: 1em 0; max-width: 62ch; font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--weight-400); line-height: var(--wp--preset--line-height--medium); color: var(--wp--preset--color--black); text-wrap: balance; } /* ── Layout de dos columnas ─────────────────────────────── Mismos estilos que .post-body-wrapper (single.css), con las columnas invertidas: