/* KD Web · páginas internas: privacidad, términos, cookies y 404 (se carga después de extras.css)
 *
 *   1. Marco de la página (usa los tokens oscuros de .sec--crema)
 *   2. Columna de lectura y tipografía de textos largos
 *   3. Marcas: [COMPLETAR] y notas para el abogado
 *   4. Índice "En esta página"
 *   5. Impresión
 */

/* ---------- 1. Marco ---------- */
.legal { padding-top: calc(var(--nav-h) + 3rem); }
main[tabindex="-1"]:focus { outline: none; }
.legal__head { max-width: 68ch; margin-bottom: clamp(1.6rem, 4vw, 2.4rem); }
.legal__head h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.legal__meta { margin-top: .8rem; color: var(--muted-dark); font-size: .95rem; }
.legal__draft {
  margin-top: 1.2rem; padding: .8rem 1rem; border: 2px dashed var(--ter-2); border-radius: 16px;
  color: var(--crema); font-size: .95rem; background: rgba(189, 108, 63, .12);
}

/* El rasguño del título se dibuja al cargar (en el inicio lo hace el scroll) */
.page-inner h1 .scratch path { animation: claw .5s var(--ease) .2s forwards; }
.page-inner h1 .scratch path:nth-child(2) { animation-delay: .29s; }
.page-inner h1 .scratch path:nth-child(3) { animation-delay: .38s; }

/* ---------- 2. Columna de lectura ---------- */
.legal__grid { display: grid; gap: 1.2rem; }
.legal__doc {
  min-width: 0; max-width: 68ch; padding: clamp(1.25rem, 4vw, 2.5rem);
  background: rgb(20 39 41 / .85); border: 1px solid rgba(242, 238, 229, .12); border-radius: 28px;
  font-size: 1.04rem; line-height: 1.7; color: var(--crema);
}
.legal__doc h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin: 2.4em 0 .6em; line-height: 1.15; }
.legal__doc h3 { font-size: 1.2rem; font-weight: 700; margin: 1.8em 0 .5em; line-height: 1.25; }
.legal__doc h2 + h3 { margin-top: 1em; }
.legal__doc p + p, .legal__doc p + ul, .legal__doc ul + p { margin-top: 1em; }
.legal__doc ul, .legal__doc ol { margin: .6em 0 0; padding-left: 1.25em; }
.legal__doc li + li { margin-top: .4em; }
.legal__doc li::marker { color: var(--ter-2); }
.legal__doc a:not(.btn) { color: var(--ter-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.legal__doc a:not(.btn):hover { text-decoration-thickness: 2px; }
.legal__cta { margin-top: 1.4em; }
.legal__doc strong { color: #fff; }
.legal__doc ::selection { background: rgba(222, 144, 100, .4); color: #fff; }
:is(.legal__doc h2, .legal__doc h3)[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* Resumen "En corto" */
.legal__short {
  padding: .9rem 1rem 1rem; border-radius: 20px;
  background: rgba(39, 73, 75, .55); border: 1px solid rgba(242, 238, 229, .14);
}
.legal__short h2 { margin: 0 0 .4em; font-size: 1.3rem; }

/* ---------- 3. Marcas ---------- */
/* [COMPLETAR: …]: un dato del negocio que falta (se llena en el panel → Datos legales) */
mark.completar {
  background: rgba(189, 108, 63, .22); color: var(--crema); font-weight: 700;
  border: 1px dashed var(--ter-2); border-radius: 6px; padding: 0 .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Nota para el abogado: en bloque, después del párrafo; se borra del código cuando el abogado la resuelve */
p.abogado {
  margin-top: .9em; padding: .7rem .9rem; border: 1.5px dashed var(--star-c); border-radius: 14px;
  font-size: .93rem; line-height: 1.5; color: var(--muted-dark);
}
p.abogado strong { color: var(--star-c); }

/* Tarjetas de cookies (una por servicio, con <dl>: sin tablas que se desplacen de lado en el celular) */
.ck { display: grid; gap: 1rem; margin-top: 1rem; }
.ck__item {
  min-width: 0; padding: 1rem 1.1rem; border-radius: 20px;
  background: rgba(242, 238, 229, .05); border: 1px solid rgba(242, 238, 229, .12);
}
.ck__item h3 { margin: 0 0 .6rem; }
.ck__item dl { margin: 0; display: grid; gap: .15rem; font-size: .96rem; }
.ck__item dt { font-weight: 700; color: var(--crema); margin-top: .5rem; }
.ck__item dt:first-child { margin-top: 0; }
.ck__item dd { margin: 0; color: var(--muted-dark); overflow-wrap: anywhere; }
.legal__doc code {
  font: 600 .88em/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: .05em .35em; border-radius: 6px;
  background: rgba(242, 238, 229, .1); color: var(--crema); overflow-wrap: anywhere;
}
@media (min-width: 900px) { .ck { grid-template-columns: 1fr 1fr; } }

/* Tu decisión: los mismos dos botones del aviso; sobre la columna oscura van en crema para verse como botones */
.legal__status { font-weight: 600; }
.legal__status:empty { display: none; }
.legal__choose { margin-top: 1rem; display: grid; gap: .7rem; max-width: 26rem; }
.legal .consent__btn { --bg: var(--crema); --fg: var(--pet); }
.legal .consent__btn:hover { background: #fff; }

/* ---------- 4. Índice ---------- */
.toc { align-self: start; border: 1px solid rgba(242, 238, 229, .14); border-radius: 20px; background: rgb(20 39 41 / .7); }
.toc summary {
  cursor: pointer; padding: .8rem 1.1rem; min-height: 44px; font-weight: 700; list-style-position: inside;
  border-radius: 20px;
}
.toc ol { list-style: none; margin: 0; padding: 0 .6rem .7rem; display: grid; gap: .1rem; }
.toc a {
  display: block; padding: .45rem .6rem; border-radius: 10px; text-decoration: none;
  color: var(--muted-dark); font-size: .95rem; line-height: 1.35;
}
.toc a:hover { color: var(--crema); background: rgba(242, 238, 229, .07); }

@media (min-width: 1000px) {
  .legal__grid { grid-template-columns: 15rem minmax(0, 68ch); gap: 3rem; align-items: start; }
  .toc {
    position: sticky; top: calc(var(--nav-h) + 24px);
    max-height: calc(100vh - var(--nav-h) - 48px); overflow: auto;
  }
}

/* ---------- 404 ---------- */
.notfound { min-height: 100svh; display: flex; align-items: center; }
.notfound__grid { display: grid; gap: 1.5rem; align-items: center; }
.notfound h1 { font-size: clamp(2.4rem, 8vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; text-wrap: balance; max-width: 13ch; }
.notfound h1 .scratch { top: -.15em; }   /* el título va en dos líneas: el rasguño no pisa la de arriba */
.notfound__lead { margin-top: 1.1rem; max-width: 44ch; color: var(--muted-dark); font-size: 1.1rem; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.notfound__links ul { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.notfound__links a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600;
  color: var(--ter-2); text-decoration: underline; text-underline-offset: .2em;
}
.notfound__cat {
  justify-self: center; order: -1; width: auto; max-height: 180px;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); animation: float 5s ease-in-out infinite;
}
@media (min-width: 860px) {
  .notfound__grid { grid-template-columns: 1.4fr 1fr; gap: 3rem; }
  .notfound__cat { order: 0; max-height: min(60vh, 440px); }
}

/* ---------- 5. Impresión ---------- */
@media print {
  .nav, .footer, .fab, .consent, .toc, .skip { display: none !important; }
  body, body::before, body::after { background: #fff !important; animation: none !important; }
  body::before, body::after { display: none; }
  .legal { padding: 0; background: #fff; color: #000; }
  .legal__doc { background: #fff; border: 0; padding: 0; color: #000; max-width: none; }
  .legal__doc a, .legal__doc strong, .legal__head h1, .legal__meta, p.abogado, p.abogado strong { color: #000; }
  .legal__short { background: none; border: 1px solid #999; }
}