/* KATA Legal pages — page-scoped. Heredada del design system. */

.kata-legal {
	background: var(--c-white);
	color: var(--c-dark);
}

/* ── DRAFT banner ──────────────────────────────────────────────────────── */
/* Bruno 2026-05-13: restyled to a dark bar so the global dark nav sits
   visually flush above the banner (light cream banner under dark nav looked
   like the nav had broken). Sits below the sticky nav as the first content
   strip on each legal page.
   Cierre 3: inner content emptied out (pages reviewed) — banner is now a
   pure dark strip that acts as a visible top frame so the global nav
   (transparent until scrollY > 60) reads against a dark backdrop instead
   of dissolving into the cream legal-header below. Min-height matches the
   nav so the strip is substantial, not a hairline. */
.legal-draft-banner {
	background: var(--c-dark-2, #151515);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-gold);
	min-height: var(--nav-h, 78px);
	color: var(--c-white);
}
.legal-draft-banner__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}
.legal-draft-banner__icon {
	font-size: 1.25rem;
	margin: 0;
	line-height: 1;
	flex-shrink: 0;
	color: var(--c-gold);
}
.legal-draft-banner__title {
	margin: 0 0 0.2rem;
	font-size: 0.9rem;
	color: var(--c-white);
	letter-spacing: 0.04em;
}
.legal-draft-banner__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
}
.legal-draft-banner__text a {
	color: var(--c-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.legal-draft-banner__text a:hover { color: var(--c-white); }

/* ── Header ────────────────────────────────────────────────────────────── */
.legal-header {
	padding: 4rem var(--gutter) 2rem;
	background: var(--c-cream);
}
.legal-header__inner { max-width: var(--maxw); margin: 0 auto; }
.legal-header__breadcrumb {
	font-size: 0.875rem;
	opacity: 0.7;
	margin-bottom: 1.5rem;
}
.legal-header__breadcrumb a { color: inherit; text-decoration: none; }
.legal-header__breadcrumb a:hover { color: var(--c-gold); }
.legal-header__title {
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.legal-header__date {
	font-size: 0.9rem;
	opacity: 0.7;
	margin: 0;
}

/* ── Layout (TOC + content) ───────────────────────────────────────────── */
.legal-layout { padding: 3rem var(--gutter) 5rem; }
.legal-layout__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 960px) {
	.legal-layout__inner {
		grid-template-columns: 240px 1fr;
		gap: 4rem;
	}
}

/* ── TOC ──────────────────────────────────────────────────────────────── */
.legal-toc { font-size: 0.95rem; }
.legal-toc__summary {
	padding: 1rem;
	background: rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.legal-toc__summary::-webkit-details-marker { display: none; }
.legal-toc__nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 0.75rem;
}
.legal-toc__link {
	display: block;
	padding: 0.5rem 0.75rem;
	color: var(--c-dark);
	text-decoration: none;
	border-left: 2px solid transparent;
	transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.legal-toc__link:hover {
	background: rgba(0, 0, 0, 0.04);
	color: var(--c-dark);
}
.legal-toc__link.is-active {
	border-left-color: var(--c-gold);
	color: var(--c-gold);
	font-weight: 600;
}
@media (min-width: 960px) {
	.legal-toc__mobile { display: contents; }
	.legal-toc__summary { display: none; }
	.legal-toc {
		position: sticky;
		top: calc(var(--nav-h, 80px) + 1.5rem);
		align-self: start;
		max-height: calc(100vh - var(--nav-h, 80px) - 3rem);
		overflow-y: auto;
	}
}

/* ── Content ──────────────────────────────────────────────────────────── */
.legal-content {
	max-width: 720px;
	font-size: 1.05rem;
	line-height: 1.7;
	min-width: 0;
}
.legal-content h2 {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 3rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	scroll-margin-top: calc(var(--nav-h, 80px) + 1rem);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	margin: 2rem 0 0.75rem;
	scroll-margin-top: calc(var(--nav-h, 80px) + 1rem);
}
.legal-content p { margin: 0 0 1rem; }
.legal-content ul, .legal-content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
}
.legal-content li { margin: 0.4rem 0; }
.legal-content a { color: var(--c-gold); text-decoration: underline; }
.legal-content strong { font-weight: 600; }

/* Inline placeholders */
.legal-placeholder {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	background: #fff3cd;
	border: 1px dashed #b8860b;
	border-radius: 2px;
	font-family: var(--ff-mono);
	font-size: 0.85em;
	color: #6c4a00;
}

/* Tables (used in cookies + shipping zones) */
.legal-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 1.5rem;
	font-size: 0.95rem;
	table-layout: fixed;
}
.legal-content th, .legal-content td {
	padding: 0.65rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	vertical-align: top;
	word-wrap: break-word;
}
.legal-content th {
	font-family: var(--ff-display);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(0, 0, 0, 0.03);
}
/* Bruno 2026-05-13 cierre 3: cookies + tracking table on Privacy §4 has
   5 cols (Cookie type · Purpose · Examples · Lifetime · Opt-out). Original
   4-col widths summed to 100% leaving the 5th (Opt-out) with 0% — combined
   with `table-layout: fixed` the browser then word-broke its prose vertically,
   one char per line. Redistribution across 5 columns: 12 + 28 + 24 + 12 + 24 = 100. */
.legal-content table th:nth-child(1),
.legal-content table td:nth-child(1) { width: 12%; }
.legal-content table th:nth-child(2),
.legal-content table td:nth-child(2) { width: 28%; }
.legal-content table th:nth-child(3),
.legal-content table td:nth-child(3) { width: 24%; }
.legal-content table th:nth-child(4),
.legal-content table td:nth-child(4) { width: 12%; }
.legal-content table th:nth-child(5),
.legal-content table td:nth-child(5) { width: 24%; }

/* ── Footer cross-links ───────────────────────────────────────────────── */
.legal-cross-links {
	padding: 4rem var(--gutter);
	background: var(--c-dark);
	color: var(--c-white);
}
.legal-cross-links__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.legal-cross-links__title {
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 2rem;
}
.legal-cross-links__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0 0 2rem;
}
@media (min-width: 640px) { .legal-cross-links__grid { grid-template-columns: repeat(3, 1fr); } }
.legal-cross-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	font-family: var(--ff-display);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.legal-cross-link:hover {
	border-color: var(--c-gold);
	color: var(--c-gold);
	background: rgba(255, 255, 255, 0.1);
}
.legal-cross-links__contact {
	font-size: 0.9rem;
	opacity: 0.75;
	margin: 0;
}
.legal-cross-links__contact a { color: var(--c-gold); text-decoration: none; }
.legal-cross-links__contact a:hover { text-decoration: underline; }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kata-legal *, .kata-legal *::before, .kata-legal *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}