/* ============================================================================ Kroovify — Páginas legales ---------------------------------------------------------------------------- Compartido por /kroovify/terminos/, /kroovify/privacidad/ y /kroovify/eliminar-cuenta/. Reutiliza los design tokens de styles.css + kroovify.css. Sin estilos inline: compatible con CSP `style-src 'self'`. ============================================================================ */ .legal-page { /* La altura del header viene del token compartido, no de un 60px a ojo. */ padding: calc(var(--header-h) + var(--spacing-2xl)) var(--content-pad) var(--spacing-3xl); background-color: var(--bg-white); /* dvh evita el salto por la barra de direcciones en iOS/Android */ min-height: 100vh; min-height: 100dvh; } .legal-container { max-width: 820px; margin: 0 auto; } .legal-header h1 { font-size: clamp(1.75rem, 6vw, var(--font-size-4xl)); text-wrap: balance; line-height: 1.2; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--primary-color); /* fallback si background-clip no está soportado */ margin-bottom: var(--spacing-sm); } .legal-updated { color: var(--text-light); font-size: var(--font-size-sm); margin-bottom: var(--spacing-2xl); } /* Entradilla bajo el título: una frase que dice de qué va la página antes del índice. Mismo tono que el cuerpo, algo más grande para que se lea primero. */ .legal-intro { color: var(--text-medium); font-size: var(--font-size-lg); margin-bottom: var(--spacing-2xl); } /* ── Índice de contenidos ── */ .legal-toc { background-color: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: var(--spacing-xl); margin-bottom: var(--spacing-2xl); } .legal-toc h2 { font-size: var(--font-size-lg); color: var(--text-dark); margin-bottom: var(--spacing-md); } .legal-toc ol { columns: 1; column-gap: var(--spacing-xl); padding-left: var(--spacing-lg); margin: 0; } .legal-toc li { margin-bottom: var(--spacing-xs); font-size: var(--font-size-sm); break-inside: avoid; } .legal-toc a { color: var(--text-medium); text-decoration: none; transition: color var(--transition-fast); } .legal-toc a:hover, .legal-toc a:focus { color: var(--primary-color); text-decoration: underline; } /* ── Secciones ── */ .legal-section { margin-bottom: var(--spacing-2xl); /* El offset del header lo aplica ya `scroll-padding-top` en (styles.css). Se deja un margen extra para que el título respire. */ scroll-margin-top: var(--spacing-md); } .legal-section h2 { font-size: var(--font-size-2xl); color: var(--text-dark); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--border-color); } .legal-section h3 { font-size: var(--font-size-lg); color: var(--text-dark); margin-top: var(--spacing-xl); margin-bottom: var(--spacing-sm); } .legal-section p { color: var(--text-medium); margin-bottom: var(--spacing-md); } .legal-section :is(ul, ol) { color: var(--text-medium); padding-left: var(--spacing-xl); margin-bottom: var(--spacing-md); } .legal-section li { margin-bottom: var(--spacing-sm); } .legal-section a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; } .legal-section a:hover, .legal-section a:focus { color: var(--primary-dark); } /* ── Botón volver ── */ .legal-back { margin-top: var(--spacing-3xl); text-align: center; } .legal-back .btn-primary { display: inline-block; background: var(--gradient); color: #ffffff; padding: var(--spacing-md) var(--spacing-2xl); border-radius: var(--radius-full); text-decoration: none; font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .legal-back .btn-primary:hover, .legal-back .btn-primary:focus { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* ── Responsive (mobile-first: base = móvil, se añade con min-width) ── */ @media (min-width: 48em) { .legal-toc ol { columns: 2; } } /* ── Objetivos táctiles del índice ────────────────────────────────────────── Cada entrada es un enlace que ocupa toda la línea de una lista: no está en una frase, así que no le aplica la excepción «inline» de WCAG 2.5.8 y debe medir al menos 24px de alto. Con `font-size: sm` el texto son 16px, así que 4px de padding arriba y abajo lo dejan en 24. */ .legal-toc a { display: inline-block; padding-block: var(--spacing-xs); } /* ── Selector de idioma (páginas con `data-i18n` en ) ───────────────── El documento lleva los dos idiomas completos y `data-lang` en decide cuál se ve. Ocultar con CSS en vez de generar el texto desde JS mantiene el contenido legal en el HTML: indexable, revisable y verificable por check-links.py. Además es lo único compatible con `style-src 'self'`. Todo va bajo `.js` por el mismo motivo que las animaciones de entrada: si el JS no llega a ejecutarse, nada debe quedar invisible. Sin JS se muestran los dos bloques uno tras otro y el selector desaparece, porque no habría nadie escuchando sus clics. */ html.js[data-lang="es"] .legal-lang[lang="en"], html.js[data-lang="en"] .legal-lang[lang="es"] { display: none; } html:not(.js) .legal-lang-switch { display: none; } .legal-lang-switch { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); justify-content: flex-end; margin-bottom: var(--spacing-lg); } .legal-lang-btn { /* Los