/* ============================================================
   LAS PÁGINAS LEGALES
   ------------------------------------------------------------
   Términos, privacidad y libro de reclamaciones. Son documentos
   para LEER, no pantallas de venta: una columna, medida de línea
   corta, y jerarquía clara entre cláusulas.

   TODOS LOS NOMBRES EMPIEZAN POR .legal-. No es manía: marco.css
   ya se llevó una página por delante por usar nombres genéricos
   (.p y .lista significan otra cosa en el plano). Se comprobó que
   el prefijo está libre en las diecisiete hojas antes de escribir
   esta.

   EL COLOR SALE DE VARIABLES, SIEMPRE. Estas páginas cargan
   oscuro.css, que redefine --ink, --bg y --line al tema oscuro.
   Un color escrito a mano aquí se quedaría claro sobre fondo
   oscuro, que es justo el fallo que ya pasó con .hero. Ojo
   especial con --navy: bajo oscuro.css vale #ffffff, así que no
   sirve como fondo de texto blanco.
   ============================================================ */

/* ---------- el documento ---------- */

/* 72ch, no el ancho de la pantalla. Una cláusula a 1300 px de
   ancho no se lee: el ojo pierde el renglón al volver. */
.legal-doc{max-width:72ch}

.legal-doc h2{
  margin:clamp(38px,4vw,56px) 0 14px;
  font-size:var(--t-3);
  /* El peso lo pone identidad.css en 700, que es el máximo de
     Zilla Slab. No se sube: a 800 el navegador la engorda él y
     sale una negrita falsa. */
}
.legal-doc h2:first-child{margin-top:0}

.legal-doc h3{
  margin:26px 0 8px;
  font-size:1.0625rem;
}

.legal-doc p,
.legal-doc li{
  margin:0 0 12px;
  font-size:.9375rem;
  line-height:1.7;
  color:var(--ink-2);
}

.legal-doc ul,
.legal-doc ol{margin:0 0 16px;padding-left:22px}
.legal-doc li{margin-bottom:7px}

.legal-doc strong{color:var(--ink);font-weight:700}

.legal-doc a{color:var(--gold);text-decoration:underline;
  text-underline-offset:2px}
.legal-doc a:hover{color:var(--gold-l)}

/* La fecha de vigencia. No es decoración: un documento legal sin
   fecha no se puede comparar con el que aceptó el cliente. */
.legal-fecha{
  display:inline-block;margin:0 0 6px;
  font-size:var(--ui-sm);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- el aviso de dato pendiente ---------- */

/* Lo pinta assets/js/legal.js cuando falta la razón social, el RUC
   o el domicilio fiscal. Tiene que verse: es la diferencia entre
   un documento incompleto y uno que miente. */
.legal-aviso{
  margin:0 0 clamp(26px,3vw,38px);
  padding:16px 18px;
  border:1px solid var(--gold);
  border-left-width:4px;
  border-radius:4px;
  background:rgba(231,170,58,.08);
  font-size:.875rem;line-height:1.65;
  color:var(--ink-2);
}
.legal-aviso strong{color:var(--ink)}
.legal-aviso a{color:var(--gold);text-decoration:underline}

/* Un hueco sin dato. Se marca en vez de dejarlo en blanco, que se
   lee como un error de maquetación y no como lo que es. */
[data-pendiente]{
  color:var(--ink-3);
  font-style:italic;
  border-bottom:1px dotted var(--line-2);
}

/* ---------- la identificación del proveedor ---------- */

.legal-ident{
  margin:0 0 clamp(26px,3vw,38px);
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg-2);
}
.legal-ident dl{display:grid;grid-template-columns:auto 1fr;
  gap:8px 18px;margin:0}
.legal-ident dt{
  font-size:var(--ui-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;
}
.legal-ident dd{margin:0;font-size:.9375rem;color:var(--ink)}

@media (max-width:520px){
  .legal-ident dl{grid-template-columns:1fr;gap:2px 0}
  .legal-ident dt{margin-top:10px}
}

/* ---------- el formulario del libro de reclamaciones ---------- */

.legal-form{max-width:720px}

.legal-rejilla{display:grid;grid-template-columns:1fr 1fr;
  gap:0 18px}
@media (max-width:620px){.legal-rejilla{grid-template-columns:1fr}}

.legal-campo{display:flex;flex-direction:column;gap:5px;
  margin-bottom:14px}
.legal-campo--ancho{grid-column:1 / -1}

.legal-campo label{
  font-size:var(--ui-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);
}
.legal-campo label .legal-req{color:var(--gold);font-weight:700}

.legal-campo input,
.legal-campo select,
.legal-campo textarea{
  width:100%;box-sizing:border-box;
  padding:11px 13px;
  font:inherit;font-size:.9375rem;
  color:var(--ink);
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:4px;
  transition:border-color .2s,box-shadow .2s;
}
.legal-campo textarea{min-height:120px;resize:vertical;line-height:1.6}
.legal-campo input:focus,
.legal-campo select:focus,
.legal-campo textarea:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(231,170,58,.18);
}
.legal-campo .legal-pista{font-size:var(--ui-sm);color:var(--ink-3)}

/* El honeypot. Fuera de la pantalla, no display:none: algunos bots
   saltan lo que está oculto y llenan lo que no lo parece. */
.legal-trampa{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}

.legal-msg{margin:14px 0 0;font-size:.875rem;line-height:1.6;
  min-height:1.2em}
.legal-msg--err{color:#ff8f7a}
.legal-msg--ok{color:#8fe3a6}

/* El acuse de recibo. El número de registro es lo único que el
   cliente se lleva, así que se ve grande y se puede copiar. */
.legal-acuse{
  margin:clamp(20px,3vw,32px) 0 0;
  padding:22px 24px;
  border:1px solid var(--gold);
  border-radius:4px;
  background:rgba(231,170,58,.07);
}
.legal-acuse__n{
  display:block;margin:8px 0 14px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,4.5vw,2.2rem);
  letter-spacing:.02em;
  color:var(--gold);
  user-select:all;
}
.legal-acuse p{margin:0 0 10px;font-size:.9375rem;line-height:1.65;
  color:var(--ink-2)}
.legal-acuse p:last-child{margin-bottom:0}