/* ==========================================================
   Sakuro — estilos de las páginas legales
   Hereda tokens.css y styles.css. Solo lo específico va aquí.
   ========================================================== */

.legal-main {
  padding-block: calc(var(--header-h) + var(--section-pad-block)) var(--section-pad-block);
  padding-inline: var(--section-pad-inline);
}

.legal {
  max-width: 48rem;
  margin-inline: auto;
  display: grid;
  gap: var(--gap-lg);
}

.legal__kicker {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
}

.legal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

.legal__updated {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.legal__body {
  display: grid;
  gap: var(--gap-lg);
  color: var(--color-text-soft);
  line-height: var(--lh-body);
  max-width: var(--measure);
}

.legal__body h2 {
  margin-top: var(--gap-lg);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
.legal__body h3 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
.legal__body p, .legal__body ul, .legal__body ol { margin: 0; }
.legal__body ul, .legal__body ol { padding-left: 1.5rem; display: grid; gap: 0.5rem; }
.legal__body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.legal__body a:hover { color: var(--color-accent-hover); }
.legal__body strong { color: var(--color-text); font-weight: var(--fw-medium); }
.legal__body code {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.legal__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.legal__body th, .legal__body td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.legal__body th {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Enlaces del pie a páginas legales ---------- */

.site-footer__legal-nav {
  grid-column: 2 / 3;
  grid-row: 3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}
.site-footer__legal-nav a { color: inherit; transition: color var(--dur-fast) var(--ease-out); }
.site-footer__legal-nav a:hover { color: var(--color-text); }

@media (max-width: 48rem) {
  .site-footer__legal-nav { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- Banner de cookies ---------- */

.cookie-banner {
  position: fixed;
  left: var(--gap);
  right: var(--gap);
  bottom: var(--gap);
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-veil);
  backdrop-filter: blur(10px);
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  transform: translateY(140%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cookie-banner.is-visible { transform: none; }
.cookie-banner p { margin: 0; max-width: 44rem; }
.cookie-banner a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.cookie-banner__actions {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}
.cookie-banner__btn {
  min-height: var(--control-h-sm);
  padding: 0 var(--control-pad-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: var(--fw-medium) var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cookie-banner__btn:hover { border-color: var(--color-border-hover); }
.cookie-banner__btn--primary {
  background: var(--gradient-accent);
  background-size: 200% 100%;
  background-position: 0 0;
  color: var(--color-on-accent);
  border-color: transparent;
  transition: background-position var(--dur-slow) var(--ease-out);
}
.cookie-banner__btn--primary:hover { background-position: 100% 0; }

@media (max-width: 48rem) {
  .cookie-banner { grid-template-columns: minmax(0, 1fr); }
}