/* ========================================================================== Doisol — Documentos legales de la raíz del sitio Ningún componente de aquí escribe un color a mano: todos leen `--linea`, que se resuelve desde . La regla 3 de ARQUITECTURA.md aplica igual en esta carpeta. El documento es texto de ley: la jerarquía la dan el tamaño, el peso y el espacio, nunca un tono nuevo. La única superficie saturada es la cabecera. ========================================================================== */ /* --- Cabecera del documento ---------------------------------------------- */ .legal-cabecera { position: relative; padding-block: var(--s-10) var(--s-9); background: var(--linea); color: var(--blanco); overflow: hidden; } /* Atmósfera, no contenido: si el degradado no pinta, la cabecera sigue siendo una superficie de color legible. */ .legal-cabecera::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 88% 0%, rgba(255, 255, 255, 0.14), transparent 62%); pointer-events: none; } .legal-cabecera > .contenedor { position: relative; z-index: var(--z-base); } .legal-migas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: var(--s-5); } .legal-migas a { text-decoration: none; } .legal-migas a:hover { color: var(--blanco); text-decoration: underline; } .legal-migas li::after { content: '·'; margin-left: var(--s-2); } .legal-migas li:last-child::after { content: ''; } .legal-cabecera h1 { max-width: 24ch; font-size: var(--t-xl); } .legal-cabecera__lema { margin-top: var(--s-5); font-size: var(--t-md); line-height: 1.45; color: rgba(255, 255, 255, 0.88); max-width: 54ch; } .legal-ficha { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: var(--t-sm); color: rgba(255, 255, 255, 0.82); } .legal-ficha strong { display: block; font-family: var(--fuente-display); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; /* 0,9 y no 0,6: con 0,6 el rótulo mide 3,87:1 sobre el azul y 3,01:1 sobre el morado, por debajo del mínimo. Medido, no estimado. */ color: rgba(255, 255, 255, 0.9); margin-bottom: var(--s-1); } .legal-ficha a { color: var(--blanco); } /* --- Disposición: índice al lado, documento al centro -------------------- Móvil primero: el índice va arriba y el documento debajo, en una sola columna. A partir de 62rem el índice pasa a la izquierda y se queda pegado, porque a esa altura ya hay ancho para las dos cosas sin bajar de la medida de lectura. `min-width: 0` en las dos columnas: sin él, una tabla ancha del documento estira la rejilla y devuelve el desplazamiento horizontal en móvil. Ya pasó tres veces en este sitio. */ .legal-disposicion { display: grid; gap: var(--s-8); align-items: start; } .legal-disposicion > * { min-width: 0; } @media (min-width: 62rem) { .legal-disposicion { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--s-9); } /* En escritorio el índice vive en su propia columna y no se plieg­a: la flecha sobra y el cursor vuelve a ser el normal. */ .legal-indice__titulo { cursor: default; } .legal-indice__titulo::after { display: none; } .legal-indice { position: sticky; top: var(--s-6); max-height: calc(100vh - var(--s-8)); overflow-y: auto; overscroll-behavior: contain; } } /* --- Índice de cláusulas ------------------------------------------------- Sin JavaScript sigue siendo una lista de enlaces internos que funcionan. El resaltado del enlace activo lo pone el script; su ausencia no cambia nada de lo que se lee. */ .legal-indice__titulo { display: flex; align-items: center; gap: var(--s-2); font-family: var(--fuente-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); padding-bottom: var(--s-3); border-bottom: 1px solid var(--borde); margin-bottom: var(--s-3); cursor: pointer; list-style: none; } /* La marca propia del navegador se retira y se pone una flecha que gira, para que el estado abierto o cerrado se lea igual en Safari y en Chrome. */ .legal-indice__titulo::-webkit-details-marker { display: none; } .legal-indice__titulo::after { content: ''; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--linea); border-bottom: 2px solid var(--linea); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-rapida) var(--ease-out); } .legal-indice[open] > .legal-indice__titulo::after { transform: rotate(-135deg) translateY(-2px); } .legal-indice ol { display: grid; gap: 2px; counter-reset: clausula; } .legal-indice a { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--t-sm); line-height: 1.35; text-decoration: none; color: var(--tinta-suave); border-radius: var(--r-sm); border-left: 2px solid transparent; transition: color var(--dur-rapida) var(--ease-out), background var(--dur-rapida) var(--ease-out), border-color var(--dur-rapida) var(--ease-out); } .legal-indice li { counter-increment: clausula; } .legal-indice a::before { content: counter(clausula, decimal-leading-zero); font-family: var(--fuente-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--azul-claro); } @media (hover: hover) and (pointer: fine) { .legal-indice a:hover { color: var(--linea); background: var(--superficie); } .legal-indice a:hover::before { color: var(--linea); } } .legal-indice a[aria-current='true'] { color: var(--linea); background: var(--superficie); border-left-color: var(--linea); font-weight: 500; } .legal-indice a[aria-current='true']::before { color: var(--linea); } /* --- El documento -------------------------------------------------------- */ .legal-cuerpo { max-width: 74ch; } .legal-clausula + .legal-clausula { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--borde); } /* `scroll-margin-top` y no un ancla suelta: el salto desde el índice tiene que dejar aire sobre el título, no pegarlo al borde de la ventana. */ .legal-clausula { scroll-margin-top: var(--s-6); } .legal-clausula h2 { font-size: var(--t-md); line-height: 1.15; margin-bottom: var(--s-4); } .legal-clausula__numero { display: block; font-family: var(--fuente-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--linea); margin-bottom: var(--s-2); } .legal-clausula p { color: var(--tinta-suave); line-height: 1.7; } .legal-clausula > * + * { margin-top: var(--s-4); } .legal-clausula a { color: var(--linea); text-decoration: underline; text-underline-offset: 2px; } /* --- Listas del documento ------------------------------------------------ El original de WordPress traía cada punto en su propio `