/* Documento de lectura larga: al revés que la portada, aquí no hay film ni tarjetas flotando. Papel fijo, una sola columna y la medida de línea de tokens.css, que es la que ya gobierna el resto del texto del sitio. */ /* css/main.css pone en --tinta (oscuro) pensando en el rebote de scroll sobre el film de la portada. Esta página no tiene film: el papel debe llegar hasta el fondo, así que el hueco que deja el body (reset.css le fija height: 100%, y el contenido real es más alto) no debe enseñar ese oscuro por debajo. */ html { background: var(--papel); } .pagina-legal { background: var(--papel); color: var(--tinta); } /* Opaca, no translúcida como en la portada. Allí el velo deja entrever el film y eso es parte del efecto; aquí lo que se entrevé es el propio texto del documento pasando por debajo, que se lee como un fallo de impresión. */ .cabecera--legal { background: var(--papel); } /* .cierre es la sección de cierre de la portada: un degradado oscuro pensado para el texto claro por defecto del body del film (--papel). Aquí el body pasa a --tinta para el documento, así que sin este ajuste la marca y el copyright del pie quedarían en texto oscuro sobre su mismo fondo oscuro, invisibles. Se corrige solo en esta página, sin tocar css/main.css. */ .pagina-legal .cierre { color: var(--papel); } .documento-legal { max-width: var(--ancho-texto); margin: 0 auto; padding: calc(var(--paso-5) + var(--paso-3)) var(--paso-3) var(--paso-5); } .documento-legal h1 { font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; } .actualizado { margin-top: var(--paso-1); color: var(--tinta-velo); font-size: 0.875rem; } .apartado-legal { margin-top: var(--paso-4); /* Ancla bajo cabecera fija: sin esto, saltar a #transparencia-ia deja el título escondido detrás de la cabecera. */ scroll-margin-top: var(--paso-4); } .apartado-legal h2 { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.5rem; padding-bottom: var(--paso-1); border-bottom: 1px solid var(--oro); } .apartado-legal h3 { margin-top: var(--paso-3); font-family: var(--fuente-texto); font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--granate); } .apartado-legal p { margin-top: var(--paso-2); line-height: 1.7; } .datos-titular { margin-top: var(--paso-2); display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: var(--paso-1) var(--paso-2); padding: var(--paso-2); border: 1px solid rgba(18, 16, 14, 0.15); border-radius: var(--radio); } .datos-titular dt { font-weight: 600; color: var(--tinta-velo); } .datos-titular dd { margin: 0; } /* El dato que el titular todavía no ha aportado. Se ve, a propósito: una página legal incompleta que no lo parece es peor que una que lo dice. */ .dato-pendiente { color: var(--granate); font-style: italic; } @media (max-width: 34rem) { .datos-titular { grid-template-columns: 1fr; } .datos-titular dd { margin-bottom: var(--paso-1); } } /* ---- La cabecera sobre papel, no sobre film ------------------------------- En la portada la cabecera flota sobre el film: main.css le pone detrás un degradado oscuro (.cabecera::before) y pinta su texto en papel, con sombra, para que se lea sobre cualquier fotograma. Aquí no hay film, y ese degradado se lee como una mancha gris sobre el papel crema. Se retira, y con él hay que invertir el texto a tinta: si se quita el fondo oscuro y se deja el texto claro, la cabecera desaparece. Van juntos siempre. */ .pagina-legal .cabecera::before { content: none; } .pagina-legal .marca, .pagina-legal .nav-ancla a { color: var(--tinta); text-shadow: none; } .pagina-legal .idiomas { background: rgba(18, 16, 14, 0.06); border-color: rgba(18, 16, 14, 0.18); } .pagina-legal .idiomas button { color: var(--tinta); } /* El botón del idioma activo conserva el oro de la portada: sobre oro, la tinta ya contrasta, así que no hay que tocarlo. */ /* ---- El camino de vuelta en el móvil -------------------------------------- main.css esconde .nav-ancla por debajo de 768 px. En la portada eso es correcto: ahí dentro solo hay anclas de sección y en el móvil sobran. Pero aquí ese mismo contenedor lleva el ÚNICO enlace de vuelta a la portada, así que esconderlo dejaba al visitante de móvil sin salida más que el botón atrás del navegador. Se recupera, y se le da fila propia: a 375 px la marca y el selector de idioma ya ocupan el ancho entero, de modo que meter el enlace en la misma línea lo aplastaría. El `order` lo manda al final para que la primera fila siga siendo marca + idiomas, como en escritorio. */ @media (max-width: 768px) { .pagina-legal .cabecera { flex-wrap: wrap; row-gap: var(--paso-1); } .pagina-legal .nav-ancla { display: block; order: 3; width: 100%; } .pagina-legal .nav-ancla a { opacity: 1; } }