/* ============================================================================ Kroovify — Páginas legales (Términos y Condiciones, Política de Privacidad) ---------------------------------------------------------------------------- Compartido por /kroovify/terminos/ y /kroovify/privacidad/. 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); } /* ── Í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 p { color: var(--text-medium); margin-bottom: var(--spacing-md); } .legal-section ul { 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); }