/* Páginas de texto: aviso legal, su versión en inglés y el 404. La cabecera y el pie son los de la portada
   (estilo.css); aquí solo va lo suyo: una columna de lectura en Panel sobre el Ciclorama. Sin 3D ni JS. */

/* ---------- Cabecera y pie ---------- */

/* Sin JS nadie le pone el filete al bajar: se lo pone la línea de tiempo del scroll, donde exista. */
@supports (animation-timeline: scroll()) {
  .cabecera {
    animation: filete-cabecera linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 8px;
  }
}
@keyframes filete-cabecera {
  from { border-bottom-color: transparent; }
  to { border-bottom-color: var(--canto); }
}

/* En el pie, la página en la que estás. */
.pie a[aria-current="page"] { text-decoration: none; font-weight: 650; }

/* ---------- Aviso legal ---------- */

.legal { padding: 56px var(--margen) 112px; }
.legal-in { max-width: 800px; margin: 0 auto; }

.legal h1 {
  font-stretch: 112%;
  font-weight: 760;
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.legal-entrada { margin-top: 18px; font-size: 19px; color: var(--rotulo); max-width: 54ch; }

.hoja {
  margin-top: 36px;
  padding: 28px 24px 32px;
  background: var(--panel);
  border: 1px solid transparent; /* en alto contraste se dibuja */
  border-radius: 10px;
}
@media (min-width: 768px) { .hoja { padding: 44px 48px 48px; } }
@media (min-width: 1200px) { .hoja { padding: 52px 56px 56px; } }

.hoja h2 {
  margin-top: 52px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.hoja h2:first-child { margin-top: 0; }
.hoja p { margin-top: 12px; max-width: 66ch; text-wrap: pretty; }

/* Las fichas (quién está detrás y privacidad): la etiqueta a la izquierda y el dato a la derecha, entre filetes. */
.hoja dl { margin-top: 18px; border-top: 1px solid var(--filete); }
.hoja dl > div {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: 24px;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--filete);
}
.hoja dt { font-size: 15px; font-weight: 650; line-height: 1.45; color: var(--rotulo); padding-top: 2px; }
.hoja dd { font-size: 17px; line-height: 1.55; max-width: 60ch; text-wrap: pretty; }

.hoja a { text-decoration-color: var(--canto); text-underline-offset: 0.2em; }
.hoja a:hover { text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }

.hoja .fecha {
  max-width: none;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--filete);
  font-size: 15px;
  color: var(--rotulo);
}

/* ---------- 404 ---------- */

.perdida { padding: 32px var(--margen) 64px; }
/* overflow-wrap: a 320 px con más espaciado de texto, «encontramos» no cabe entera y se partiría fuera de la vista. */
.perdida h1 {
  font-stretch: 106%;
  font-weight: 760;
  font-size: clamp(2.375rem, 9.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.perdida .entrada { margin-top: 20px; }
.perdida .acciones { margin-top: 24px; }
.perdida-otra { margin-top: 28px; font-size: 17px; color: var(--rotulo); max-width: 52ch; }
.perdida-otra a { color: var(--tinta); text-decoration-color: var(--canto); }
.perdida-otra a:hover { text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }

/* El dibujo fijo de la tolva, el mismo del contacto de la portada: la máquina espera tu correo. */
.perdida-dibujo { margin: 36px calc(-1 * var(--margen)) 0; }
.perdida-dibujo .dibujo { width: 100%; height: auto; }

/* ---------- Escritorio ---------- */

@media (min-width: 1024px) {
  .perdida {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
    min-height: calc(100svh - var(--cabecera));
    padding-block: 40px 56px;
  }
  .perdida h1 { font-stretch: 112%; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1; }
  .perdida .entrada, .perdida .acciones { margin-top: 28px; }
  .perdida-texto { grid-column: 1 / 8; }
  .perdida-dibujo { grid-column: 8 / 13; margin: 0 calc(-1 * var(--margen)) 0 0; }
}

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
  .legal { padding-top: 32px; padding-bottom: 72px; }
  .legal-entrada { font-size: 18px; }
  .hoja { margin-inline: calc(-1 * var(--margen) + 8px); }
  .hoja h2 { margin-top: 40px; font-size: 22px; }
  .hoja dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* ---------- Impresión (el borde de los botones en alto contraste está en estilo.css) ---------- */

@media print {
  .cabecera { position: static; }
  .navegacion, .idioma, .boton-cabecera, .saltar { display: none; }
  .hoja { padding: 0; border: 0; background: none; }
}