/* ============================================================================
   SPICA HOME V6 · LEGAL (r9)
   Hoja de las paginas de documento: /privacy/. Vive aparte de sections.css
   porque no comparte NADA con el home (ni escenas, ni pines, ni demos) y asi
   el home no carga ni un byte de mas.

   Reglas heredadas que aqui se respetan tal cual:
   - los tokens salen SOLO de css/tokens.css, esta hoja no define ninguno
   - el header y el footer son los del sistema (sections.css + base.css),
     esta hoja no los toca
   - nada de reveals con gate .js: en un documento legal el texto NUNCA puede
     depender de que un modulo arranque, asi que la entrada es CSS pura y
     siempre termina en opacity 1
   ========================================================================== */

/* ---- portada del documento -------------------------------------------------
   El header es fixed y mide ~4.5rem: el padding superior lo descuenta a mano
   porque esta pagina no tiene hero que lo absorba. */
.legal-hero {
  position: relative;
  overflow: clip;
  padding: calc(7.5rem + env(safe-area-inset-top)) 0 var(--rhythm-half);
}

/* la flor de marca como filigrana: misma pieza del header y del footer,
   referenciada con <use>, sin peso extra. Decorativa y por debajo del texto. */
.legal-hero__mark {
  position: absolute;
  top: 50%;
  right: calc(var(--gutter) * -0.35);
  /* r10: la caja del viewBox cambio de proporcion; este ancho deja la flor
     dibujada del mismo tamano optico que antes */
  width: min(26.5rem, 37vw);
  transform: translateY(-46%);
  color: var(--violet);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.legal-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}

.legal-hero h1 {
  font-family: var(--font-display);
  /* un paso por debajo de --text-display: esto es un documento, no una portada
     de venta, y a 5.55rem el titulo pesaba mas que la politica */
  font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  max-width: 16ch;
}

.legal-hero .lead { max-width: 52ch; }

.legal-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* entrada CSS pura, sin gate .js. Termina siempre en opacity 1, asi que un
   fallo de JavaScript no puede dejar el documento invisible (que es justo lo
   que le pasaba a /privacy/ y /about/ con el main.js compartido de la v3). */
@keyframes legal-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.legal-hero__inner > * {
  animation: legal-rise var(--dur-enter) var(--ease-out) both;
}
.legal-hero__inner > *:nth-child(2) { animation-delay: 0.07s; }
.legal-hero__inner > *:nth-child(3) { animation-delay: 0.14s; }
.legal-hero__inner > *:nth-child(4) { animation-delay: 0.21s; }

/* ---- cuerpo: indice fijo + documento ---------------------------------------- */
.legal-body {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 6vw, 6rem);
  /* QA r9: con --rhythm quedaban 202px de papel muerto entre la tarjeta y el
     footer. El home cierra con 132px entre su ultimo contenido y el footer;
     con --rhythm-half aqui son 123px, o sea el mismo respiro de cierre. */
  padding-bottom: var(--rhythm-half);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 6.4rem;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.legal-toc__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legal-toc__list {
  display: grid;
  border-left: 1px solid var(--line);
}
.legal-toc__list a {
  position: relative;
  padding: 0.42rem 0 0.42rem 0.85rem;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--ink-faint);
  transition: color var(--dur-state) var(--ease);
}
.legal-toc__list a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0.42rem;
  bottom: 0.42rem;
  width: 2px;
  background: var(--violet);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-state) var(--ease-out);
}
.legal-toc__list a:hover { color: var(--ink); }
.legal-toc__list a.is-current { color: var(--violet); }
.legal-toc__list a.is-current::before { transform: scaleY(1); }

/* ---- el documento ----------------------------------------------------------- */
.legal-doc { max-width: 68ch; }

.legal-block {
  padding: clamp(1.9rem, 3.6vw, 2.7rem) 0;
  border-top: 1px solid var(--line);
}
.legal-block:first-child { border-top: 0; padding-top: 0; }

.legal-block__head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}
.legal-block__num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--violet);
  flex: none;
}
.legal-block h2 { margin: 0; }

.legal-block p {
  line-height: 1.72;
  color: var(--ink-soft);
}
.legal-block p + p { margin-top: 0.85rem; }
.legal-block a:not(.btn) {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.legal-block a:not(.btn):hover { color: var(--violet-deep); }

/* lista con etiqueta mono: la usan "lo que recogemos" y "tus derechos" */
.legal-list {
  display: grid;
  margin-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.legal-list li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.4rem 1.4rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
/* QA r9: la ultima fila NO cierra con raya. Cerraba, y quedaban dos hairlines a
   55px una de otra (la de la fila y la del bloque siguiente); y en "Your rights"
   el parrafo que sigue a la lista parecia atrapado dentro de la caja. */
.legal-list li:last-child { border-bottom: 0; }
.legal-list + p { margin-top: 1.15rem; }
.legal-list dt,
.legal-list__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 460;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0.22rem;
}
.legal-list__body {
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ---- cierre: tarjeta de contacto -------------------------------------------- */
.legal-card {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  padding: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.legal-card__mark { height: 2.1rem; width: auto; color: var(--violet); }
.legal-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.legal-card p { color: var(--ink-soft); max-width: 46ch; }
.legal-card a:not(.btn) {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal-card .btn { margin-top: 0.5rem; }
/* la flecha de este boton apunta a la izquierda: el hover la empuja hacia alla */
.legal-card .btn--ghost:hover .btn__arrow { transform: translateX(-3px); }

/* ============================================================================
   RESPONSIVE
   Mismos escalones que el resto del sitio (1080 · 767 · 430). El indice fijo
   deja de tener sentido en cuanto la columna se vuelve unica: pasa a ser una
   tira horizontal con scroll propio, anclada bajo el header.
   ========================================================================== */

@media (max-width: 1080px) {
  .legal-hero { padding-top: calc(6.6rem + env(safe-area-inset-top)); }
  .legal-hero__mark { width: min(21rem, 40vw); opacity: 0.06; }
  .legal-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .legal-doc { max-width: none; }

  /* r14 QA final P2-6: la tira pegada (sticky, sangrada al borde con margen
     negativo y scroll horizontal) se salia 20px de .legal-body y su ultima
     pastilla cruzaba el borde derecho a 375 (qa/layout-qa.mjs y
     qa/webkit-smoke.mjs). Ahora el indice es un bloque normal dentro del
     gutter con las cinco pastillas en filas: nada sale de su caja y nada
     cruza el viewport. legal.js solo desplaza la tira si scrollea (guardado
     por scrollWidth > clientWidth), asi que no hay nada que tocar ahi. */
  .legal-toc {
    position: static;
    gap: 0.6rem;
  }
  .legal-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-left: 0;
  }
  .legal-toc__list a {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    font-size: 0.8rem;
  }
  .legal-toc__list a::before { display: none; }
  .legal-toc__list a.is-current {
    color: var(--violet);
    border-color: var(--violet);
    background: var(--lavender-light);
  }
}

/* targets tactiles de 44px, misma condicion que el resto del sitio: un equipo
   con raton no puede cumplirla nunca, asi que el escritorio queda fuera */
@media (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .legal-toc__list a { min-height: 44px; display: inline-flex; align-items: center; }
  .legal-block a:not(.btn) { padding-block: 2px; }
}

@media (max-width: 767px) {
  .legal-hero__mark { opacity: 0.05; right: -18%; }
  .legal-hero h1 { max-width: 14ch; }
  .legal-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
  .legal-list dt,
  .legal-list__label { padding-top: 0; }
}

@media (max-width: 430px) {
  .legal-hero { padding-top: calc(6.1rem + env(safe-area-inset-top)); }
  .legal-card { padding: 1.3rem; }
}

/* ---- movimiento reducido ----------------------------------------------------
   base.css ya acorta toda animacion a 0.001s, asi que la entrada termina
   instantanea. Se declara igual para que el estado final quede explicito. */
@media (prefers-reduced-motion: reduce) {
  .legal-hero__inner > * { animation: none; opacity: 1; transform: none; }
}