` y no en el ``: así `.hoja` —que es de `paginas.css` y no se toca— hereda la medida de lectura sin que ninguna otra página se entere. El ancho sale de sumar las dos columnas reales: índice (14,5rem) + aire + cuerpo (38rem). Elegir un número redondo y confiar en que cierre es cómo aparecen los 90 px de sobra a la derecha que nadie explica. */ .legal-marco { --content: 950px; position: relative; isolation: isolate; padding-block: clamp(70px, 9vh, 118px) clamp(96px, 13vh, 160px); } /* --- La portada ----------------------------------------------------------- Rótulo, título y fecha. Nada más: un aviso de privacidad que abre con una bajada de marketing pierde justo lo que tiene que transmitir. */ .legal-portada { position: relative; padding-bottom: clamp(38px, 5vh, 56px); border-bottom: 1px solid var(--line-soft); margin-bottom: clamp(44px, 6vh, 76px); } /* La luz de la sala, apenas. Detrás del título y recortada por el `overflow: clip` del `

`, así nunca produce scroll horizontal. */ .legal-portada::after { position: absolute; z-index: -1; right: -12%; top: -40%; width: 46%; height: 170%; background: radial-gradient(ellipse at 62% 42%, rgba(167, 139, 250, .2), transparent 66%); filter: blur(30px); content: ""; pointer-events: none; } .legal-portada h1 { margin: 0; max-width: 16ch; font-size: clamp(44px, 5.4vw, 74px); font-weight: 670; letter-spacing: -.052em; line-height: 1; } /* La fecha es un dato de estado, no un subtítulo: se lee como una etiqueta y el punto violeta la ancla al sistema sin subirle el peso tipográfico. */ .legal-actualizado { display: inline-flex; align-items: center; gap: 10px; margin: clamp(24px, 3vh, 34px) 0 0; color: var(--rotulo); font-size: 12.5px; font-weight: 580; letter-spacing: .035em; } .legal-actualizado::before { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); content: ""; } /* --- Las dos columnas ------------------------------------------------------ Índice angosto a la izquierda, documento a la derecha. Las dos medidas son fijas y no fracciones: el cuerpo tiene que medir lo que mide un renglón cómodo, y un `1fr` lo estira hasta donde llegue la ventana. */ .legal-columnas { display: grid; grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr); gap: clamp(36px, 5vw, 80px); } /* --- El índice ------------------------------------------------------------- Pegajoso, porque en un documento largo la pregunta permanente es "¿dónde estoy?". `site.js` pone `aria-current` en el enlace de la sección que se está leyendo; acá solo se le da forma a ese estado. El tope son los 76 px que ocupa la isla de navegación más aire: menos que eso y el índice se mete debajo de la barra. `align-self: start` no es cosmético y es fácil de perder: el bloque contenedor de una celda de grilla es el área entera de la fila, así que el índice viaja por todo el alto del documento **solo si** su caja se encoge a su contenido. Estirado —el valor por defecto— ocupa la fila completa, no le queda un píxel por el que desplazarse y `sticky` deja de hacer nada. */ .legal-indice { position: sticky; top: 96px; align-self: start; } .legal-indice-rotulo { margin: 0 0 12px 20px; color: var(--rotulo); font-size: 10px; font-weight: 720; letter-spacing: .16em; text-transform: uppercase; } /* El riel es el borde de la lista, y el marcador de la sección activa se apoya justo encima: un solo elemento de un píxel hace de guía y de carril. */ .legal-indice ol { display: grid; margin: 0; padding: 0; border-left: 1px solid var(--line-soft); list-style: none; } .legal-indice a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 7px 4px 7px 20px; color: var(--muted); font-size: 13.5px; font-weight: 540; line-height: 1.4; text-decoration: none; transition: color var(--paso) var(--curva); } .legal-indice a::before { position: absolute; left: -1px; top: 50%; width: 2px; height: 17px; border-radius: 2px; background: var(--violet); content: ""; opacity: 0; translate: 0 -50%; scale: 1 .35; transition: opacity var(--paso) var(--curva), scale var(--paso) var(--curva); } .legal-indice a[aria-current] { color: var(--tinta); font-weight: 620; } .legal-indice a[aria-current]::before { opacity: 1; scale: 1 1; } @media (hover: hover) { .legal-indice a:hover { color: var(--tinta-suave); } .legal-indice a:hover::before { opacity: .4; scale: 1 1; } } /* --- El cuerpo ------------------------------------------------------------- 38rem son unos 69 caracteres a la medida del párrafo: el renglón donde el ojo encuentra solo el principio de la línea siguiente. Más ancho y se pierde el salto; más angosto y el texto se vuelve una columna de periódico. */ .legal-cuerpo { max-width: 38rem; font-size: clamp(16.5px, 1.15vw, 17.5px); } /* El aviso de borrador abre el documento y necesita separarse de lo que sigue: pegado a la primera sección se lee como parte de ella. La forma —el filo ámbar a la izquierda— ya viene de `site.css` y no se toca: es la única señal de precaución del sistema y cambiarla de color la volvería decorativa. */ .legal-cuerpo .legal-warning { margin: 0 0 clamp(38px, 5vh, 58px); font-size: 14.5px; } /* El ancla no puede dejar el título debajo de la barra flotante. */ .legal-cuerpo > section { scroll-margin-top: 96px; } /* La línea separa secciones, no las encierra: un documento legal en tarjetas se lee como cinco documentos sueltos. La primera no la lleva porque arriba ya está el aviso. */ .legal-cuerpo > section + section { margin-top: clamp(34px, 4.4vh, 50px); padding-top: clamp(34px, 4.4vh, 50px); border-top: 1px solid var(--line-soft); } .legal-cuerpo h2 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 27px); font-weight: 640; letter-spacing: -.032em; line-height: 1.2; } .legal-cuerpo p { margin: 0; color: var(--muted-strong); line-height: 1.78; text-wrap: pretty; } .legal-cuerpo p + p { margin-top: 18px; } /* Los rótulos de lo que todavía falta definir. Se marcan con tinta plena porque son lo que hay que buscar cuando este texto vuelva de revisión. */ .legal-cuerpo b { color: var(--tinta); font-weight: 650; } /* --- Escalas -------------------------------------------------------------- Sin ancho para dos columnas, el índice **cambia de forma**: deja de ser una barra lateral pegajosa y pasa a ser una fila de pastillas arriba del documento. Un índice sticky en un teléfono se come media pantalla, y una columna de enlaces sueltos antes del texto no se distingue del texto. */ @media (max-width: 1000px) { .legal-columnas { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4.4vh, 46px); } .legal-indice { position: static; } .legal-indice-rotulo { margin-left: 0; } .legal-indice ol { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; } .legal-indice a { padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .72); } /* Sin riel no hay dónde apoyar el marcador: el estado activo pasa a ser la pastilla entera. */ .legal-indice a::before { display: none; } .legal-indice a[aria-current] { border-color: rgba(124, 58, 237, .32); background: rgba(124, 58, 237, .08); color: var(--violet-deep); } } @media (max-width: 760px) { .legal-portada h1 { max-width: none; } /* El halo apoyado en el borde derecho de una pantalla angosta es una mancha sobre el título, no luz de fondo. */ .legal-portada::after { display: none; } }