/* ==================================================================
   COLD2HORSE — páginas legales (plantilla común)

   Una sola hoja para las seis: protección de datos, cookies, modelo de
   desistimiento, términos y condiciones, aviso legal y declaración de
   accesibilidad. Va encima de base.css y no lleva nada propio de un
   documento concreto: todo sale del marcado.

   Son páginas de lectura, no de escaparate: sin foto de cabecera, sin
   pins ni scrubs, con la columna de texto medida en caracteres y un
   índice pegado al lateral. Lo único que se anima es la entrada.
   ================================================================== */

/* ---------- cabecera de documento ---------- */

.lhead {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(7.5rem, 17vh, 11rem) clamp(2.5rem, 6vh, 4rem);
  overflow: clip;
}

/* Un resplandor frío arriba a la izquierda, en lugar de la fotografía
   de las demás interiores: da aire sin robarle peso al texto. */
.lhead::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%;
  left: -10%;
  width: min(46rem, 80%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in oklch, var(--ice) 20%, transparent), transparent 68%);
  pointer-events: none;
}

.lhead__title {
  font-size: clamp(2.25rem, 1rem + 4.2vw, 5rem);
  margin-block: clamp(0.9rem, 2.4vh, 1.6rem) 0;
  max-width: 22ch;
}

.lhead__title .hl { color: var(--ice); }

.lhead__lead { margin: clamp(1.1rem, 3vh, 1.75rem) 0 0; max-width: 62ch; }

.lhead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.lhead__meta p { margin: 0; }
.lhead__meta b { color: var(--dim); font-weight: 600; }

/* ---------- rejilla del documento ---------- */

.doc { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem); }

.doc__grid {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}

@media (max-width: 980px) { .doc__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- índice ---------- */

.idx { position: sticky; top: 6.25rem; }

@media (max-width: 980px) {
  .idx {
    position: static;
    border: 1px solid var(--hair);
    background: var(--ink-2);
    padding: clamp(1.1rem, 3vw, 1.5rem);
  }
}

.idx h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice);
  margin: 0 0 1rem;
}

.idx ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; counter-reset: idx; }

.idx a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.42rem 0;
  text-decoration: none;
  color: var(--dimmer);
  font-size: var(--s--1);
  line-height: 1.35;
  transition: color 0.3s var(--ease);
}

.idx a::before {
  counter-increment: idx;
  content: counter(idx, decimal-leading-zero);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: color-mix(in oklch, var(--ice) 55%, transparent);
  transition: color 0.3s var(--ease);
}

.idx a:hover { color: var(--paper); }
.idx a[data-on='true'] { color: var(--paper); }
.idx a[data-on='true']::before { color: var(--ice); }

/* ---------- prosa ---------- */

.doc__body { max-width: 74ch; }

.doc__body > section { scroll-margin-top: 6rem; }
.doc__body > section + section { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

.doc__body h2 {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2.15rem);
  line-height: 0.96;
  letter-spacing: 0.005em;
  margin: 0 0 1.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hair);
}

.doc__body h2 .n {
  display: block;
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--ice);
  margin-bottom: 0.6rem;
}

.doc__body h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice);
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0.75rem;
}

.doc__body h4 {
  font-size: var(--s-0);
  font-weight: 600;
  color: var(--paper);
  margin: 1.5rem 0 0.5rem;
}

.doc__body p { color: var(--dim); margin: 0 0 1rem; }
.doc__body p:last-child { margin-bottom: 0; }
.doc__body strong { color: var(--paper); font-weight: 600; }
.doc__body em { color: var(--paper); font-style: normal; }

.doc__body a { color: var(--ice); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.doc__body a:hover { color: var(--ice-hi); }
.doc__body .btn { text-decoration: none; color: var(--ink); }
.doc__body .btn--line { color: var(--paper); }
.doc__body .btn--line:hover { color: var(--ink); }

.doc__body ul, .doc__body ol { color: var(--dim); margin: 0 0 1rem; padding-left: 1.35rem; display: grid; gap: 0.5rem; }
.doc__body li::marker { color: color-mix(in oklch, var(--ice) 70%, transparent); }
.doc__body li > ul, .doc__body li > ol { margin-top: 0.5rem; margin-bottom: 0; }

/* Listas de rasgos sin viñeta: cada punto abre con una barra cian. */
.doc__body ul.ticks { list-style: none; padding-left: 0; gap: 0.7rem; }

.doc__body ul.ticks li {
  padding-left: 1.6rem;
  position: relative;
}

.doc__body ul.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.85rem;
  height: 1px;
  background: var(--ice);
}

/* ---------- tabla ----------
   Se sale de la columna en pantallas estrechas: rueda dentro de su caja,
   nunca empuja la página a lo ancho. */

.doc__table { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--hair); }

.doc__body table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--s--1); }

.doc__body th, .doc__body td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hair);
}

.doc__body tr:last-child td { border-bottom: 0; }

.doc__body th {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice);
  background: var(--ink-2);
  white-space: nowrap;
}

.doc__body td { color: var(--dim); }
.doc__body td:first-child { color: var(--paper); font-weight: 500; }

/* ---------- bloques destacados ---------- */

.card {
  border: 1px solid var(--hair);
  background: var(--ink-2);
  padding: clamp(1.2rem, 3vw, 1.9rem);
  margin: 1.5rem 0;
}

.card--ice { border-color: color-mix(in oklch, var(--ice) 40%, transparent); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.card h3:first-child { margin-top: 0; }

/* Ficha de datos: etiqueta arriba, valor debajo, en columnas. */
.dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
}

.dl dt {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 0.3rem;
}

.dl dd { margin: 0; color: var(--paper); }
.dl dd a { color: var(--ice); }

/* ---------- modelo de desistimiento ---------- */

.form { border: 1px solid var(--hair); background: var(--ink-2); padding: clamp(1.35rem, 4vw, 2.5rem); margin: 1.75rem 0; }
.form > :first-child { margin-top: 0; }

.form__rows { display: grid; gap: 1.35rem; margin: 1.5rem 0 0; }

.form__row {
  display: grid;
  gap: 0.35rem;
}

.form__row label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.form__row input,
.form__row textarea {
  font: inherit;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in oklch, var(--paper) 28%, transparent);
  padding: 0.5rem 0.15rem;
  width: 100%;
  transition: border-color 0.3s var(--ease);
}

.form__row textarea { resize: vertical; min-height: 6rem; border: 1px solid color-mix(in oklch, var(--paper) 22%, transparent); padding: 0.7rem 0.8rem; }

.form__row input:focus,
.form__row textarea:focus { outline: 0; border-color: var(--ice); }

.form__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.35rem; }

.form__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.form__note { margin-top: 1.25rem; color: var(--dimmer); font-size: var(--s--1); }

/* ---------- otras páginas legales ---------- */

.lother { border-top: 1px solid var(--hair); padding-block: clamp(2.5rem, 6vw, 4rem); }

.lother h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice);
  margin: 0 0 1.5rem;
}

/* La rejilla no siempre se llena (seis fichas, columnas variables), así que
   la línea no se pinta con el fondo del contenedor sino celda a celda: los
   huecos de la última fila quedan vacíos en lugar de teñirse. */
.lother__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; }

.lother__grid a {
  box-shadow: 0 0 0 1px var(--hair);
  background: var(--ink);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  text-decoration: none;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  transition: background 0.35s var(--ease);
}

.lother__grid a:hover { background: var(--ink-2); }
.lother__grid a[aria-current='page'] { background: var(--ink-3); }

.lother__grid b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--s-0);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
}

.lother__grid span { font-size: var(--s--1); color: var(--dimmer); line-height: 1.4; }

/* ---------- impresión ----------
   El modelo de desistimiento está para rellenarlo e imprimirlo, así que
   la hoja impresa se queda en negro sobre blanco y sin cromo de la web. */

@media print {
  .nav, .lang, .idx, .lother, .foot, .form__acts, .scrollcue { display: none !important; }

  body { background: #fff; color: #111; font-size: 11pt; }

  .lhead { padding-block: 0 1.5rem; border-color: #ccc; }
  .lhead::before { display: none; }
  .lhead__title { font-size: 22pt; }
  .lhead__meta { color: #555; border-color: #ccc; }

  .doc { padding-block: 1.5rem 0; }
  .doc__grid { display: block; }
  .doc__body { max-width: none; }
  .doc__body p, .doc__body ul, .doc__body ol, .body-lg, .lhead__meta b { color: #333; }
  .doc__body h2 { color: #111; border-color: #ccc; page-break-after: avoid; }
  .doc__body h2 .n, .doc__body h3, .doc__body a { color: #111; }
  .doc__body strong, .doc__body em, .dl dd { color: #000; }

  .card, .form { background: #fff; border-color: #999; break-inside: avoid; }
  .form__row input, .form__row textarea { color: #000; border-color: #666; }
  .dl dt { color: #555; }

  @page { margin: 18mm; }
}