/* Validación de certificados — mismos colores y letras que el sitio (dorado #aa9166, botón #836e49). */
@font-face {
  font-family: 'Tinos';
  src: url('fonts/Tinos-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
[data-certificados-validar] { max-width: 960px; margin: 0 auto 40px; font-size: 16px; color: #555; }
.cert-form { max-width: 640px; margin: 0 auto; }
.cert-label { display: block; font-weight: 600; margin-bottom: 8px; color: #444; }
.cert-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-input {
  flex: 1 1 260px; min-width: 0; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px;
  border: 1px solid #dcdcdc; border-radius: 3px; color: #444; background: #fff;
}
.cert-input:focus { outline: 2px solid #aa9166; outline-offset: 1px; border-color: #aa9166; }
.cert-boton {
  min-height: 48px; padding: 10px 24px; font: inherit; font-weight: 600; color: #fff; background: #836e49;
  border: 0; border-radius: 3px; cursor: pointer;
}
.cert-boton:hover { background: #6c5835; }
.cert-boton:focus-visible { outline: 2px solid #444; outline-offset: 2px; }
.cert-boton:disabled { opacity: 0.6; cursor: default; }
.cert-boton-sec { background: #fff; color: #836e49; border: 1px solid #836e49; }
.cert-boton-sec:hover { background: #f3ede2; }
.cert-estado { text-align: center; min-height: 1.5em; margin: 16px 0; }
.cert-error { color: #a12a1f; font-weight: 600; }
.cert-resultado { margin-top: 24px; }
.cert-lienzo { display: block; width: 100%; height: auto; border: 1px solid #e6e0d4; box-shadow: 0 4px 16px rgba(108, 88, 53, 0.08); }
.cert-texto { margin: 20px 0 16px; line-height: 1.6; }
.cert-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.cert-enlace { margin-top: 16px; font-size: 14px; word-break: break-all; }
.cert-enlace a { color: #836e49; }